Home/ Questions/Q 8354345
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-09T09:31:22+00:00

This seems to be a common problem. I’ve reviewed 5 or 6 other SO

  • 0

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?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Add 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.

    • 0