Hi
I read in several CSS tutorials that block-level elements, such as
<div& <pare rendered with an implicit line break before and
after.
I set to test this out using the following HTML:
I included comments where I would expect to see line breaks (e.g a new
line) in the rendered output.
<body>
<!-- Line break above-- >
<div id="ContainingBlock1" style="background-color:red;">
<!-- Line break above-- >
<div id="ContainingBlock2" style="background-color:blue;">
<!-- Line break above-- >
Anonymous Block 3
<!-- Line break below -->
<!-- Line break above-- >
<p id="ContainingBlock4" style="width:100px; height: 100px;
background-color:Purple; color:White;">
<!-- Line break above-- >
Anonymous Block 5
<!-- Line break above-- >
</p>
<!-- Line break below -->
</div>
<!-- Line break below -->
<!-- Line break above-- >
<p id="ContainingBlock6" style="width:100px; height: 100px; background-
color:green; color:White;">
<!-- Line break above-- >
Anonymous Block 7
<!-- Line break below -->
</p>
<!-- Line break below -->
</div>
<!-- Line break below -->
<!-- Line break above -->
<div id="ContainingBlock8" style="background-color:red;">
<!-- Line break above-- >
<div id="ContainingBlock9" style="width:100px; height: 100px;
background-color:blue;">
</div<!-- Line break below -->
<!-- Line break above-- >
<div id="ContainingBlock10" style="width:100px; height: 100px;
background-color:green;">
</div>
<!-- Line break below -->
</div>
<!-- Line break below -->
</body>
Rendering the above HTML both in IE 7 & Firefox 2.0.0.7 show only one
line break between ContainingBlock2 & ContainingBlock6 as well as
between ContainingBlock1 and ContainingBlock9
Can someone please explain this?
Thanks,
Itai
