Why is there vertical space between these divs?
Question
This seems to be a common problem. I've reviewed 5 or 6 other SO questions and none seem to fit this case exactly or have a solution that works for me. I'm not even sure if I care about the "how to fix it" as the "why is it happening" at this point. Be kind, HTML is not my specialty.
I've got this HTML/CSS:
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
body {
background: #336699;
}
.postContainer {
margin-left: 40px;
background: white;
width: 555px; /* 480px + 75 for bg */
}
.postTop {
background: red;
height: 75px;
padding-left: 80px;
}
.postMiddle {
background: yellow;
padding-left: 80px;
}
.postBottom {
background: red;
height: 75px;
padding-left: 80px;
}
</style>
</head>
<body>
<div class="postColumn">
<div class="postContainer">
<div class="postTop">
<p>asdf</p>
</div>
<div class="postMiddle">
<p>asdf</p>
</div>
<div class="postBottom">
<p>asdf</p>
</div>
</div>
</div>
</body>
</html>
I've stripped a lot of it down; the goal is to have a blog post with an image that has a top part, a stretched middle part, and a bottom part down the left. So the top area's going to have a short bit of text, the middle area an arbitrary amount, and the bottom area one line's worth of text. But since there's some space between the divs, the image doesn't line up.
I've checked the margins in Firebug and Chrome's dev tools; both claim there's no margin and no padding. I've explicitly set margins and nothing's changed. Some questions recommend changing line-height; I tried that and it just makes the text wonky without fixing the gaps. I've tried changing the heights. Some posts said the content of the div can affect the parent margins, but altering those hasn't done anything either. A lot of posts stated, "Use a reset file!" I sort of understand what that is, but I'd like to know why it works before randomly applying it. So what voodoo curse is inserting this space, and how do I break it?
2 answers
solution1
6 ACCPTED 2012-08-08 15:57:06
Add p { margin: 0; padding: 0; } p { margin: 0; padding: 0; } p { margin: 0; padding: 0; } to your styles or use a reset CSS file which will stop things like this happening in the future and give you more control over your styling.
solution2
2 2012-08-08 15:57:14
p标签有一个顶部和底部边距，删除边距，空间将消失。
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.