CSS - Inline Box

About

This page is about inline box in the block formatting layout context.

Generation

Inline box can be generated:

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:

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>

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; 
}

Documentation / Reference

Task Runner