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:

rendered result of version 10

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; } 

rendered result of version 11

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

Popular posts from this blog

java - activate/deactivate sonar maven plugin by profile? -

python - TypeError: can only concatenate tuple (not "float") to tuple -

java - What is the difference between String. and String.this. ? -