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