我意外地开始了怪癖模式（没有声明doctype），当我发现我已经开始采用怪癖模式时，我通过声明一个doctype来纠正它。
然而，我无法摆脱一个错误，.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>
答案 0 :(得分：0)
间隙是由于您的图像停留在基线上造成的。图像就像文本和文本一样位于其行框内的基线上，以允许类型中的下行。要消除间隙，请将图像放在其行框底部，而不是执行
vertical-align:bottom;