Geek Answers Handbook

Why is there vertical space between these divs?

This seems to be a common problem. I looked at 5 or 6 other SO questions and none of them are suitable for this case or have a solution that works for me. I'm not even sure if I'm worried about “how to fix it”, like “why this is happening” at the moment. Please, HTML is not my specialty.

I have 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 have deprived him of much; the goal is to have a blog post with an image that has a top, a stretched middle and a bottom on the left. Thus, the upper area will have a short bit of text, the average area will be an arbitrary amount, and the lower area will have one line of text. But since there is some space between the separators, the image does not line up.

I checked the fields in Firebug and Chrome dev tools; both claim that there is no field and are not filled. I explicitly set the fields and did not change anything. Some questions recommend changing the line height; I tried this and it just makes the text elusive without correcting the spaces. I tried to change the heights. Some posts say that the contents of a div can affect the parent fields, but changes to them did nothing either. Many messages have been said: "Use the reset file!". I understand what it is, but I would like to know why it works before applying it randomly. So, what voodoo curse does this space insert and how to break it?

+4
source share
2 answers

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 that will stop things like this from happening in the future and give you more control over your style.

+6
source

Tags p have upper and lower margins, delete margins and space disappears.

+2
source

More articles: