Test 1
A DIV spanned by a display: inline DIV with a 25 pixel margin.
The margins do not affect the block-level element; however, they should give this element a 25-pixel left margin of this element (i.e., the text that starts 'The margins') (since the code is:
<div style="display: inline; margin: 25px">
<div>
A DIV spanned by a display: inline DIV with a 25 pixel margin.
</div>
</div>
The margins
, which produces blocks equivalent to:
-
<anonymous block> (spanning the inline DIV)
-
<block> (created by the normal DIV)
-
<anonymous block> (created between the end of the normal DIV and the inline one - all orphaned inline elements have anonymous blocks around them). The right margin of the inline DIV therefore affects the anonymous text (in the same way as would plain <span style="margin-right: 5px"></span>).
Test 2
This DIV is spanned by a display: inline DIV with a red border. Whether the border should have any effect is uncertain.
Here, to remind you of multiline borders, is a standard bordered SPAN:
A multiline SPAN with border
A multiline SPAN with border
A multiline SPAN with border
A multiline SPAN with border
A multiline SPAN with border
A multiline SPAN with border
A multiline SPAN with border
A multiline SPAN with border
A multiline SPAN with border
A multiline SPAN with border
A multiline SPAN with border
Test 3
This SPAN inside a DIV is spanned by a display: inline DIV with 3 pixels of padding. If the padding is displayed (only vertical padding applies), the block will apppear as a solid
block of red (albeit with red jagged edges).
Here's a standard padded SPAN for comparison.
Here's a standard padded SPAN for comparison.
Here's a standard padded SPAN for comparison.
Here's a standard padded SPAN for comparison.
Here's a standard padded SPAN for comparison.
Here's a standard padded SPAN for comparison.
Here's a standard padded SPAN for comparison.
Here's a standard padded SPAN for comparison.
Here's a standard padded SPAN for comparison.
Here's a standard padded SPAN for comparison.
Here's a standard padded SPAN for comparison.
Test 4
Some text here
hello
This DIV is spanned by a display: inline DIV with a red border.
hello
Test 5
Some text here hello
This DIV is spanned by a display: inline DIV with a red border.
hello