CSS - Anonymous Block Box

> (World Wide) Web - (W3|WWW) > CSS - Cascading Style Sheets - Markup Language (HTML|XML) Skin > CSS - Block Layout

1 - About

Because a container box can only contains boxes, a anonymous text (ie a text that is not enclosed in an element) will be contained in an anonymous box.

If a container box (inline or block) has a block-level box inside it, then we force it to have only block-level boxes inside it.

3 - Property

3.1 - Inheritance

The properties of anonymous boxes are inherited from the enclosing non-anonymous box. Non-inherited properties have their initial value.

3.2 - Percentage value

Anonymous block boxes are ignored when resolving percentage values that would refer to it: the closest non-anonymous ancestor box is used instead.

In the basic example, if the child of the anonymous block box inside the DIV needs to know the height of its containing block to resolve a percentage height, then it will use the height of the containing block formed by the DIV. It will not use the height of the anonymous block box.

Advertising

4 - Example

4.1 - Container box with a child block box = Anonymous Block Box

if a block container box has a block-level box inside it, then we force it to have only block-level boxes inside it.

In a document like this:

<DIV>
  Some text
  <P>More text
</DIV>
div {
  border: 1px solid DeepSkyBlue;
}
p {
  border: 1px solid blue;
}

The DIV element generates a block container box that has both:

  • inline content (“Some text”) that is contained in an anonymous block box
  • and block content (“More Text”)

Diagram showing the three boxes:

4.2 - Inline Box text interrupted by a block = anonymous block boxes

When an inline box contains a block-level box, the inline content is broken around the block-level box splitting the inline box into two boxes, one on each side of the block-level box(es). The line boxes before the break and after the break are enclosed in anonymous block boxes.

Example:

p    { 
   border: 2px solid aqua;
   background-color: #ece6e6;
}
span { 
    display: block;
    border: 2px solid DeepSkyBlue;
}
<P>
   This is anonymous text before the SPAN.
   <SPAN>This is the content of SPAN.</SPAN>
   This is anonymous text after the SPAN.
</P>

The P element contains:

  • a chunk of anonymous text C1: This is anonymous text before the SPAN
  • followed by a block-level element. It becomes a sibling of the anonymous boxes
  • followed by another chunk of anonymous text. C2: This is anonymous text afer the SPAN

The resulting boxes would be a block container box representing the P element containing:

  • an anonymous block box
  • the SPAN block box,
  • and another anonymous block box

Properties set on the container element still apply to the boxes and content of that element. For example, the background color apply also to the anonymous box.

Advertising

5 - Documentation / Reference

web/css/block/anonymous.txt · Last modified: 2019/02/09 11:41 by gerardnico