CSS - Inline Box
About
This page is about inline box in the block formatting layout context.
Generation
Inline box can be generated:
- by default from an inline element
- or by setting the display property.
Element
Inline-level elements generate by default inline-level boxes.
- …
You can generally found them in the phrasing category
Display
The following values of the 'display' property make an element inline-level:
- 'inline',
- 'inline-table',
- and 'inline-block'.
Formatting
The formatting defines how an inline box is rendered:
- block-level elements begin on new lines, but inline elements can start anywhere in a line.
- inline block doesn't take the width of a box into account.
- the content is distributed in lines (e.g., emphasized pieces of text within a paragraph, inline images, etc.).
An inline element like <span>
- will not keep the text in a block.
- will not take the whole available width
- will not take into account the padding of the sibling element.
- … the Inline-formatting context specification gives the rendering rules in details.
New Line
Inline elements are different from structure elements in that inline elements are part of the content of a tag.
The b tag below is an in-line element
b {
border: 2px solid aqua;
}
p {
border: 1px solid blue;
}
<p>The b (bold) will <b>stay on the same line</b>.</p>
<p>The p (default block box rendering) will add a end of line and shows up then on a new line.</p>
Example
<p>First Inline P</p>
<p>Second Inline P (default) <BR> And some <BR> comment</p>
p {
border: 1px solid black;
padding: 7px;
margin: 10px;
display: inline;
}