Question

正在进行网站设计，出于某种原因，2个div之间存在一个真正不应该存在的换行符。这是JSFiddle http://jsfiddle.net/d593fdea/

我知道现在的设计很难看，但忽略了大部分设计。我的问题只与div offersContainer和recentWinnersHeadlineContainer之间的差距有关。

这真的让我烦恼，因为这个差距不应该存在，我不知道为什么会这样。非常感谢任何帮助，谢谢！

HTML：

<html>
<head>
<link rel="stylesheet" type="text/css" href="styles.css">
<link href='http://fonts.googleapis.com/css?family=Roboto+Slab' rel='stylesheet' type='text/css'>
</head>
<body>
<div id="mainContainer">

<div id="navContainer">
<div id="logoImgContainer"><img src="logo.png"></div>
<p id="navLinks">Prizes Winners FAQ Contact Us</p>
</div>

<div id="slideShowContainer">
<img src="slide1.jpg">
</div>

<div id="offersContainer">
<div class="offersArrowImg">
<img src="leftOffersArrow.jpg">
</div>
<div class="offerContainer">
<img class="offerImg" src="offer1.jpg">
<div class="offerBtn">Offer Name</div>
</div>
<div class="offerContainer">
<img class="offerImg" src="offer2.jpg">
<div class="offerBtn">Offer Name</div>
</div>
<div class="offerContainer">
<img class="offerImg" src="offer3.jpg">
<div class="offerBtn">Offer Name</div>
</div>
<div class="offerContainer">
<img class="offerImg" src="offer4.jpg">
<div class="offerBtn">Offer Name</div>
</div>
<div class="offersArrowImg">
<img src="rightOffersArrow.jpg">
</div>
</div>

<div id="recentWinnersHeadlineContainer">
<p id="recentWinnersHeadline">Recent Winners</p>
</div>

<div id="recentWinnersContainer">
<div class="recentWinnerContainer">
<img class="recentWinnerImg" src="recentWinner1.jpg">
<p class="recentWinnerName">Firstname Lastname</p> entered to win a <p class="recentWinnerPrizeName">Prize Name</p>
</div>
<div class="recentWinnerContainer">
<img class="recentWinnerImg" src="recentWinner2.jpg">
<p class="recentWinnerName">Firstname Lastname</p> entered to win a <p class="recentWinnerPrizeName">Prize Name</p>
</div>
<div class="recentWinnerContainer">
<img class="recentWinnerImg" src="recentWinner3.jpg">
<p class="recentWinnerName">Firstname Lastname</p> entered to win a <p class="recentWinnerPrizeName">Prize Name</p>
</div>
<div class="recentWinnerContainer">
<img class="recentWinnerImg" src="recentWinner4.jpg">
<p class="recentWinnerName">Firstname Lastname</p> entered to win a <p class="recentWinnerPrizeName">Prize Name</p>
</div>
<div class="recentWinnerContainer">
<img class="recentWinnerImg" src="recentWinner5.jpg">
<p class="recentWinnerName">Firstname Lastname</p> entered to win a <p class="recentWinnerPrizeName">Prize Name</p>
</div>
</div>

<div id="recentWinnersMapContainer">

</div>

<div id="footer"></div>
</div>
</body>
</html>

CSS：

#mainContainer {
width:1000px;
margin:0 auto 0 auto;
}

#navContainer {
width:1000px;
height:75px;
background-color:#3299bb;
}

#logoImgContainer {
float:left;
margin:13px 0px 0px 20px;
}

#navLinks {
float:right;
margin: 15px 20px 0 0;
font-family: 'Roboto Slab', serif;
font-size:30px;
color:#ffffff;
}

#slideShowContainer {
width:1000px;
height:380px;
background-color:#000000;
}

#offersContainer {
width:1000px;
height:188px;
background-color:blue;
}

.offerContainer {
width:227px;
height:188px;
float:left;
background-color:red;
}

#offerImg {
width:227px;
height:146px;
}

.offersArrowImg {
float:left;
}

#recentWinnersHeadlineContainer {
width:1000px;
height:60px;
background-color:#ff9900;
}

#recentWinnersContainer {
width:495px;
height:320px;
}

Answer 1

它是p标记的默认边距，将来您应该使用重置或全局清除边距和所有元素的填充

#recentWinnersHeadline{
  margin: 0;
}

FIDDLE

Answer 2

它包含margin-top元素的<p>属性。

您需要添加以下代码：

#recentWinnersHeadlineContainer p {
    margin-top: 0;
}

您的小提琴已更新：http://jsfiddle.net/d593fdea/1/

Answer 3

您的问题已经解决，但这是另一个问题：

<div id="mainContainer">
    <div id="navContainer">
        <div id="logoImgContainer"><img src="logo.png"></div>
        <p id="navLinks">Prizes Winners FAQ Contact Us</p>
    </div>

    <div id="slideShowContainer">
        <img src="slide1.jpg">
    </div>

    <div id="offersContainer">
        <div class="offersArrowImg">
        <img src="leftOffersArrow.jpg">
    </div>

    <div class="offerContainer">
        <img class="offerImg" src="offer1.jpg">
        <div class="offerBtn">Offer Name</div>
    </div>

    <div class="offerContainer">
        <img class="offerImg" src="offer2.jpg">
        <div class="offerBtn">Offer Name</div>
    </div>

    <div class="offerContainer">
        <img class="offerImg" src="offer3.jpg">
        <div class="offerBtn">Offer Name</div>
    </div>

    <div class="offerContainer">
        <img class="offerImg" src="offer4.jpg">
        div class="offerBtn">Offer Name</div>
    </div>

    <div class="offersArrowImg">
        <img src="rightOffersArrow.jpg">
    </div>
</div>

<div id="recentWinnersHeadlineContainer">
    <p id="recentWinnersHeadline">Recent Winners</p>
</div>

<div id="recentWinnersContainer">
    <div class="recentWinnerContainer">
        <img class="recentWinnerImg" src="recentWinner1.jpg">
        <p class="recentWinnerName">Firstname Lastname</p> entered to win a <p class="recentWinnerPrizeName">Prize Name</p>
    </div>

    <div class="recentWinnerContainer">
        <img class="recentWinnerImg" src="recentWinner2.jpg">
        <p class="recentWinnerName">Firstname Lastname</p> entered to win a <p class="recentWinnerPrizeName">Prize Name</p>
    </div>

    <div class="recentWinnerContainer">
        <img class="recentWinnerImg" src="recentWinner3.jpg">
        <p class="recentWinnerName">Firstname Lastname</p> entered to win a <p class="recentWinnerPrizeName">Prize Name</p>
    </div>

    <div class="recentWinnerContainer">
        <img class="recentWinnerImg" src="recentWinner4.jpg">
        <p class="recentWinnerName">Firstname Lastname</p> entered to win a <p class="recentWinnerPrizeName">Prize Name</p>
    </div>

    <div class="recentWinnerContainer">
        <img class="recentWinnerImg" src="recentWinner5.jpg">
        <p class="recentWinnerName">Firstname Lastname</p> entered to win a <p class="recentWinnerPrizeName">Prize Name</p>
    </div>
</div>

<div id="recentWinnersMapContainer">

</div>

<div id="footer"></div>
</div>

^请注意，最后一个结束div标签没有匹配的开头对应物。缩进非常明显。没有它是不可能的。

div之间神秘的断线。 JSFiddle包括在内

3 个答案: