html - 我找不到元素之间的空间

Question

我不小心以怪癖模式启动(没有声明文档类型)，当我发现我以怪癖模式启动时，我通过声明文档类型来纠正它。

但是有一个错误我无法消除，.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