Can anyone tell me where I'm getting a scroll bar on this code. I know it's the 20px bottom margin on the H2, but I don't know why.

<html>
<head>
<style type="text/css">
html, body, div, span, p, blockquote, h1, h2, h3, h4, h5, h6, hr, ol, ul, li, a, img, input, textarea, object, emded, iframe, fieldset, form, label, legend, table, tr, td {
margin: 0px;
padding: 0px;
border: 0px;
outline: 0;
}

html, body {
height: 100%;
text-align: center;
}

#container {
min-height: 100%;
width: 100%;
}

* html #container {
height: 100%;
}

 p {
margin-bottom: 20px;
}
</style>
</head>

<body>
    <div id="container">
        <p>paragraph with a bottom margin of 20px</p>
    </div>  
</body>
</html>

3 answers

2
points

It's a margin-collapse issue.

try this:

#content_container {
width: 1000px;
margin: auto;
padding: 1px 0;
}

and read about it here: http://complexspiral.com/publications/uncollapsing-margins/

Answered almost 8 years ago by Tony Crockford
  • Hi Tony, thanks for the link, the article was interesting, but doesn't totally help. I'm trying to make this pixel-perfect and I therefore don't want to add padding that is going to ruin the look. For some reason it is placing the bottom-margin of the p tag below the container div. Can you see how else I can resolve this? I don't want to change the p tag's margin to padding as I will lose the benefit of margin-collapse. Edward Williams almost 8 years ago
  • Could you add a border? My understanding of it is that margins need something to push against, or the poke through border would do it, make it body background colour and it should work? Tony Crockford almost 8 years ago
  • another way to do it is to put 20px padding on the bottom of content_container and take the 20px margin off the last element in the container. There needs to be padding or a border or margins will do weird stuff - especially with a height critical layout... Tony Crockford almost 8 years ago
0
points

I'm not sure why, but height:100%; in the html, body style is causing it. If you remove it it will be gone. I'm not sure why you need, but I would just remove it.

Answered almost 8 years ago by Darryl Hein
  • I need to do this so that any child elements (i.e. a container div) can be full screen if their width and height are set to 100%. The child elements can only be as big as their parent element. Edward Williams almost 8 years ago
0
points

Have you tried adding a <br/> below the <p>? Not a clean solution, but it might give you what you want. Another suggestion is you specify #container to be 99% high and specify the margin-bottom of p to be 1%

Answered almost 8 years ago by Divya Manian