Check out the following two links:
http://jsfiddle.net/carloscalla/ABCD1234/
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/EFGH5678/
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's a puzzling scenario - when a border is applied to the container, the child's padding impacts the container. However, without the border (or with padding), this issue doesn't occur. Hence, when applying a background color, there seems to be a white space between the document objects.
Can someone shed light on this? Is there a solution that doesn't involve adding padding or border to the container?