CSS - Inline Block

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

1 - About

inline box in the context of block

Advertising

3 - Generation

Inline box can be generated:

3.1 - Element

Inline-level elements generate by default inline-level boxes.

You can generally found them in the phrasing category

3.2 - Display

The following values of the 'display' property make an element inline-level:

Advertising

4 - 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>

4.1 - 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>

Advertising

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

6 - Documentation / Reference

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