元素之间的空格我找不到

Question

我意外地在quirks模式下启动(没有声明doctype)，当我发现我在quirks模式下启动时，我通过声明doctype来更正它。

然而，有一个错误我无法摆脱，在.car-box-img和car-box之间有一个空格，我在inspector中找不到。

你知道这里会有什么问题吗？我知道我可以通过在.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>

Answer 1

这个间隙是由于你的图像停留在基线上造成的。图像就像文本，文本位于其行框内的基线上，以允许文字中的下沉。要消除间隙，请将图像放在其线框的底部，方法是执行以下操作

vertical-align:bottom;

Visual formatting: line box