display:block inside display:inline
Solution 1
when i read the spec, i find your question actually quite well answered:
When an inline box contains a block box, the inline box [...] [is] broken around the block. The [in]line boxes before the break and after the break are enclosed in anonymous boxes, and the block box becomes a sibling of those anonymous boxes.
<BODY style="display: inline; ">
This is anonymous text before the P.
<P>This is the content of P.</P>
This is anonymous text after the P.
</BODY>
The resulting boxes would be an anonymous block box around the BODY, containing an anonymous block box around C1, the P block box, and another anonymous block box around C2.
or, visually:
+- anonymous block box around body ---+
| +- anonymous block box around C1 -+ |
| | + |
| +---------------------------------+ |
| |
| +- P block box -------------------+ |
| | + |
| +---------------------------------+ |
| |
| +- anonymous block box around C2 -+ |
| | + |
| +---------------------------------+ |
+-------------------------------------+
now to your question: is this different from <BODY style="display: block; ">
?
yes, it is. while it is still 4 boxes (anonymous block box around body now being BODY block box), the spec tells the difference:
Properties set on elements that cause anonymous block boxes to be generated still apply to the [generated anonymous block] boxes and content of that element. For example, if a border had been set on the BODY element in the above example, the border would be drawn around C1 (open at the end of the line) and C2 (open at the start of the line):
+--------------------------------------
| This is anonymous text before the P.
+--------------------------------------
This is the content of P.
--------------------------------------+
This is anonymous text after the P. |
--------------------------------------+
this is different to <BODY style="display: block; ">
:
+--------------------------------------+
| This is anonymous text before the P. |
| |
| This is the content of P. |
| |
| This is anonymous text after the P. |
+--------------------------------------+
Solution 2
I think I've understood the difference, finally, and there is a fundamental difference.
When the top-level element (e.g. <BODY>
) is defined with display:block, then:
There's a block associated with the element
This block contains (i.e. it acts as the containing block for) anonymous blocks (e.g. text nodes) and for non-anonymous child element (e.g.
<P>
blocks)The top-level element's style attributes, e.g. padding, are associated with this containing block
When the top-level element (e.g. <BODY>
) is defined with display:inline, then:
There's no single block associated with the element
The element's contents (text nodes in an anonymous block, and child elements in a non-anonymous block) do not have a containing block which is associated with the top-level element
The top-level element's style attributes, e.g. padding, are associated with its inline content
Solution 3
It sometimes depends on the exact css
defined or browser.
Most commonly, I've seen two behaviors:
The
display:block
element insidedisplay:inline
element makes thedisplay:inline
act like adisplay:block
withwidth:100%
.A
display:inline
element containing onlydisplay:block
float:left
orfloat:right
elements takes no space, and is as if there were no elements inside of it. Thedisplay:block
elements act as if they where inside anotherdisplay:block
element, sometimes having funky actions depending onposition
.
Both position
and float
make the child elements have sometimes bizarre behaviors, but avoiding them make them work generally as if they were inline
.
ChrisW
Updated on June 16, 2022Comments
-
ChrisW about 2 years
I want to understand what happens when an element whose CSS is
display:block
is a DOM child of an element whose CSS isdisplay:inline
(so that the block element is a child of an inline element).This scenarios is described in the Anonymous block boxes section for the CSS 2.1 specification: the example includes the following rules ...
body { display: inline } p { display: block }
... and the accompanying text says ...
The BODY element contains a chunk (C1) of anonymous text followed by a block-level element followed by another chunk (C2) of anonymous text. The resulting boxes would be an anonymous block box around the BODY, containing an anonymous block box around C1, the P block box, and another anonymous block box around C2.
If you have a
display:inline
parent element, and if this parent has a child that isdisplay:block
, then the existence of that child seems to make the parent nearly behave likedisplay:block
, and ignore the fact that it's defined asdisplay:inline
(in that the parent now contains nothing but anonymous and non-anonymous block children, i.e. it no longer contains any inline children)?My question is, in this scenario (where there's a
display:block
child) then what are the differences between the parent's being defineddisplay:inline
instead ofdisplay:block
?
Edit: I more interested in understanding the CSS 2.1 standard than in how and whether various browser implementations behave in practice.
2nd Edit:
There's one difference noted in the spec. In the following document, the border for the 2nd 'block' paragraph surrounds the whole paragraph and the whole width of the page; whereas the border for the 1st 'inline paragraph is around each line (even when there are several lines) within the paragraph and no more than the exact width of each line (with each line being shorter than the page width).
<html> <head> <style type="text/css"> p.one { border-style:solid; border-width:1px; display: inline; } p.two { border-style:solid; border-width:1px; } </style> </head> <body> <p class="one">Some text. <b>Note:</b> The "border-width" property does not work if it is used alone. Use the "border-style" property to set the borders first.</p> <p class="two">Some text.</p> </body> </html>
If I add the following style rule ...
b { display: block; }
... then the "Note:" in the first inline paragraph becomes a block, which splits the paragraph (according to the specs, the first and last part of the paragraph are now in an anonymous block). However, the border around the first and last part of the paragraph are still 'inline'-style borders: and so, still not the same as if
p.one
had been declareddisplay:block
in the first place.There's a quote from the spec, which says,
Properties set on elements that cause anonymous block boxes to be generated still apply to the boxes and content of that element. For example, if a border had been set on the BODY element in the above example, the border would be drawn around C1 (open at the end of the line) and C2 (open at the start of the line).
Is the "border-style" property the only type of property where the difference is visible?
-
ChrisW almost 15 yearsYes, you're right. Is the "border-style" property the only type of property where the difference is visible?
-
ax. almost 15 yearsno - it is also visible with margins, paddings, text-align, text-decoration, etc.
-
ChrisW almost 15 yearsUsing "text-decoration: underline" I see text (only text, not whitespace) being underlined regardless of the element's 'display'. What do you think the difference ought to be? [I'm using IE8 and FF3.0.14 fwiw]
-
ax. almost 15 yearswith inline parent, only the generated anonymous block boxes are underlined, not the original child block box (FF3.5.3 win). note this part of the spec: "As CSS1 and CSS2 did not define this behavior, CSS1-only and CSS2-only user agents may implement this alternative model and still claim conformance to this part of CSS 2.1. This does not apply to UAs developed after this specification was released."
-
ChrisW almost 15 yearsI observe that with 'display: inline' the border affects every line (e.g. there's horizontal border between lines); but the padding and margin properties don't affect every line (e.g. the inter-line spacing doesn't change). Can you please cite anywhere which describes how the properties including padding and margin are supposed to behave when they're applied to a 'display: inline' element?
-
ChrisW almost 15 years"with inline parent, only the generated anonymous block boxes are underlined, not the original child block box" -- I don't understand this sentence (also I've upgraded to FF3.5.3 to try to see what you're talking about).
-
ax. almost 15 yearswhat i mean with "with inline parent, ...": underlined are "This is anonymous text before the P." and "This is anonymous text after the P.". "This is the content of P." is not underlined.
-
ChrisW almost 15 yearsWhen 'text-decoration: underline;' is added to the body element I see (using FF3.5.3 and using IE8) that all 3 sentences (including "This is the content of P") are underlined, both when 'display:block' and when 'display:inline' (and that surprises me, because 'text-decoration' is specified as not inherited).
-
ax. almost 15 yearsdo you use the exact example from the spec, incl. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">? with "display: inline" on body, i get underlines on the anonymous blocks and no underline on the <p>. / gotta go now - good night.
-
ChrisW almost 15 yearsOk: I now see that that there is a difference with the padding and margin properties, and I even understand why that difference exists. The reason why there's a difference is that when
<BODY>
isdisplay:block
then the padding is a property of the containing block which contains the<P>
. Whereas when the<BODY>
isdisplay:inline
then there is no containing block for the<P>
(instead the<P>
is contained in the top-level viewport or document block), and the padding is a property of the contents of the anonymous blocks. -
ChrisW almost 15 years"incl.
<!DOCTYPE
..." -- Ok now I see the difference with the text-decoration too. Thanks for your help. -
user over 9 yearsI don't know if the real browser behavior is conformant to the spec, but with the code
abc<span>def<p>ghi</p>jkl</span>mno
you won't get block boxes arounddef
andjkl
, you'll seeabcdef
in one line (the same forjklmno
), sodef
is still inline. -
ax. over 9 years@user Your snippet is invalid HTML - a <p> is not allowed inside a <span>. Try with valid HTML.
-
user over 9 years@ax. Ok, replace
<p>
with<span style="display:block;">
or replace<span>
with<div style="display:inline;">
, you'll get valid HTML and the same result. -
ax. over 9 years@user Question and answer are not about the relation of
def
toabc
(which are still inline, right), but about the relation ofdef
to the enclosed blockghi
and the inline remainder `jkl (which are blocks now): jsfiddle.net/vqj1uqsL -
ModernIncantations almost 8 yearsThis plus the most popular answer helped a lot.