display:block inside display:inline

by

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.  |
+--------------------------------------+

More Related Contents:

  1. CSS two div width 50% in one line with line break in file [duplicate]
  2. CSS two divs width 50% in one line with line break in file [duplicate]
  3. Detect the type of font that is displayed in an image [closed]
  4. Responsive css background images
  5. Any way to declare a size/partial border to a box?
  6. Add a CSS border on hover without moving the element [duplicate]
  7. How to prevent long words from breaking my div?
  8. Control the dashed border stroke length and distance between strokes
  9. Scrolling a flexbox with overflowing content
  10. Font Awesome 5 – why aren’t icons like bitcoin, facebook, twitter showing?
  11. Does css hover work on mobile devices?
  12. How can I remove the outline around hyperlinks images?
  13. My CSS is not getting injected through my content script
  14. Text on image mouseover?
  15. Two divs, one fixed width, the other, the rest
  16. Bootstrap dropdowns menus appearing behind other elements – IE7
  17. Responsive css styles on mobile devices ONLY
  18. CSS rounded corners in IE8
  19. Is there such a thing as an “all inclusive sibling” CSS selector?
  20. CSS Best Practice about ID and Class?
  21. Bootstrap 4 card-deck with number of columns based on viewport
  22. What does @-moz-document url-prefix() do?
  23. Styling elements with a dot (.) in the class name
  24. Css Content, Attr and Url in the same sentence
  25. CSS Transform with element resizing
  26. Correct terms and words for sections and parts of selectors
  27. CSS: transform: translate(-50%, -50%) makes texts blurry [duplicate]
  28. CSS: Left, Center, & Right Align Text on Same Line
  29. Row Wrap in flex-box not wrapping in Safari
  30. minmax fails (invalid property value)

Leave a Comment