Below is a sample of my HTML+CSS code:
<div>
<div class="first">text</div>
<div>more text</div>
</div>
div {
display: inline;
}
.first {
display: block;
}
What's interesting is that when the first item has a display:block; within an inline parent, there is an unexpected empty line before it (seen in Chrome and Firefox).
I'm curious to learn why this occurs and would appreciate an explanation.
Check out this jsfiddle showcasing the issue: http://jsfiddle.net/kkozmic/fsm9D/1/