html - Box model only apply when container have a padding or a border? -
take @ 2 links:
http://jsfiddle.net/carloscalla/n8q27/10/
html:
<!doctype html> <body> <div id="container"> <h1>title</h1> <h2>subtitle</h2> </div> <div id="container2"> <p>hola</p> </div> </body>
css:
h1 { background-color: green; } h2 { background-color: blue; } #container { background-color: yellow; border: solid black 2px; } #container2 { background-color: orange; border: solid blue 2px; }
rendered:
http://jsfiddle.net/carloscalla/n8q27/11/
html:
<!doctype html> <body> <div id="container"> <h1>title</h1> <h2>subtitle</h2> </div> <div id="container2"> <p>hola</p> </div> </body>
css:
h1 { background-color: green; } h2 { background-color: blue; } #container { background-color: yellow; } #container2 { background-color: orange; }
it simple, when apply border container, child's padding considered container, if don't apply border(or padding works well) doesn't when apply background-color, there white space between document objects.
can explain this? there way solve without applying padding or border container?
this margin collapse. instead of applying border, set overflow: auto;
. resolves margin collapse.
demo jsfiddle
#container { background-color: yellow; overflow:auto; }
Comments
Post a Comment