0
我不小心以怪癖模式启动（没有声明文档类型），当我发现我已经开始使用怪癖模式时，我通过声明文档类型来纠正它。元素之间的空间我找不到
然而，有一个我不能摆脱的错误，在检查器中找不到的.car-box-img和car-box之间有一个空格。
你知道这里可能是什么问题吗？我知道我可以通过在.car-box上设置负边距来解决这个问题，但这对我没有帮助 - 因为我不知道我做错了什么。
我已经把它放在codepen上：http://codepen.io/anon/pen/JYNQpz 但它也在下面，因为stackoverflow需要它。
/*
CSS-RESET
*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/*
HTML5 display-role reset for older browsers
*/
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
/*
CSS
*/
html, body {
height: 100%;
}
body {
font-family: "proxima-nova-alt", sans-serif;
font-size: 16px;
background-color: #edede9;
line-height: 1.3;
}
.wrapper {
width: 1000px;
margin: 0 auto;
}
#hero {
background-size: cover;
background-image: url(http://placehold.it/1500x1500);
width: 100%;
height: 100%;
}
.left {
float: left;
}
.right {
float: right;
}
/*
TYPOGRAPHY
*/
h1, h2, h3, h4, h5, h6 {
}
h2 {
font-size: 40px;
font-weight: 700;
}
.bold {
font-weight: 700;
}
a {
text-decoration: none;
color: #ffd717;
}
/*
HEADER
*/
header {
position: fixed;
width: 100%;
border-bottom: 1px solid rgba(255, 255, 255, 0.5);
}
header .header-center {
width: 40%;
float: left;
}
.header-left {
float: left;
width: 30%;
}
.header-right {
float: right;
width: 30%;
}
header .logo img {
max-width: 200px;
margin: 0 auto;
padding-top: 18px;
display: block;
}
.logo-litur {
fill: yellow;
}
header ul li {
display: inline-block;
padding: 25px 20px;
font-weight: 700;
color: white;
}
header .header-right ul li {
border-left: 1px solid rgba(255, 255, 255, 0.5);
float: right;
}
header .header-left ul li {
border-right: 1px solid rgba(255, 255, 255, 0.5);
}
header a {
color: white;
}
header a:hover {
border-bottom: 6px solid white;
padding-bottom: 5px;
}
/*
SEARCH
*/
.search {
position: absolute;
bottom: 50px;
left: 50%;
transform: translate(-50%, -50%);
display: none;
}
input[type=search] {
height: 78px;
width: 435px;
padding: 10px;
color: #bbc7cc;
/* background-color: white;*/
border: 0px;
font-size: 30px;
text-align: center;
border-radius: 10px;
font-weight: 700;
background-image:url('http://placehold.it/40x40');
background-repeat:no-repeat;
background-position: 15px;
font-family: "proxima-nova-alt";
}
::-webkit-input-placeholder {
color: #d5e0e4;
}
:-moz-placeholder { /* Firefox 18- */
color: #d5e0e4;
}
::-moz-placeholder { /* Firefox 19+ */
color: #d5e0e4;
}
:-ms-input-placeholder {
color: #d5e0e4;
}
/*
STAFF PICKS
*/
.staff-picks {
margin-top: 60px;
}
.car-box {
width: 430px;
background-color: white;
padding: 10px 30px;
margin-top: 0px;
}
.car-box-img {
border-radius: 10px 10px 0 0;
width: 100%;
height: 235px;
margin-top: 30px;
margin-bottom: 0px;
}
.car-box h3 {
font-family: "freight-display-pro";
font-weight: 700;
font-size: 32px;
margin-bottom: 50px;
}
.car-box p {
border-top: 1px solid #bbc7cc;
padding: 9px 0;
}
.car-box-footer {
border-radius: 0 0 10px 10px;
background-color: #dee4e7;
padding: 20px 30px;
color: #9ba9b4;
font-weight: 700;
font-size: 18px;
margin-bottom: 30px;
}
.car-box-footer:hover {
background-color: #ffd717;
}
<body>
<div id="hero">
<header>
<div class="header-left">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Cars</a></li>
<li><a href="#">Parts</a></li>
</ul>
</div> <!-- end header-left -->
<div class="header-center">
<a class="logo" href="#"><img alt="Chariot" src="images/logo.svg"></a>
</div> <!-- end header-center -->
<div class="header-right">
<ul>
<li>User (sign out)</li>
<li>Cart icon</li>
</ul>
</div> <!-- end header-right -->
</header>
<div class="search">
<input type="search" name="search" id="search" placeholder="Find your dream car…">
</div> <!-- end search -->
</div> <!-- end hero -->
<div class="wrapper">
<section class="staff-picks">
<h2>Staff picks</h2>
<article class="left">
<img class="car-box-img" alt="" src="http://placehold.it/470x235">
<div class="car-box">
<h3>Chevrolet Corvette</h3>
<p><span class="bold">Model</span> 1957</p>
<p><span class="bold">Lorem ipsum</span> Consecetur adipiscing</p>
<p><span class="bold">Dolor sit</span> Isicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. henderit in voluptate velit.</p>
</div> <!-- end car-box -->
<div class="car-box-footer">
<p>More<i class="right">píla</i></p>
</div> <!-- end car-box-footer -->
</article>
<article class="right">
<img class="car-box-img" alt="" src="http://placehold.it/470x235">
<div class="car-box">
<h3>Chevrolet Corvette</h3>
<p><span class="bold">Model</span> 1957</p>
<p><span class="bold">Lorem ipsum</span> Consecetur adipiscing</p>
<p><span class="bold">Dolor sit</span> Isicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. henderit in voluptate velit.</p>
</div> <!-- end car-box -->
<div class="car-box-footer">
<p>More<i class="right">píla</i></p>
</div> <!-- end car-box-footer -->
</article>
</section> <!-- end staff-picks -->
</div> <!-- end wrapper -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
</body>
</html>
嗨约瑟夫 - ＃1试图解决共同的问题..你可以尝试把你的问题更普遍哪一个可以帮助其他类似问题的人？ – jantimon