Block and inline

Block elements

A <div> is an example of a block-level element in HTML. Other examples include <h1>-<h6>, <p>, <section>, <nav>, etc. The following code snippets use <div> to show how block-level elements behave in the default rendering mode.

Block element properties:

• The default height of a block-level element is the height of the content.
• The default width of a block-level element is the length of the page.
• You can set the height and width of block-level elements in CSS.
• Block elements are used to organize large sections of the HTML page.
• Block elements can have inline or block elements as children.
• Block-level elements flow top to bottom, meaning all block-level elements appear on their own line without an explicit line break (<br/>)

Height and width of block elements

By default, the height of a block element is the height of the content, and the width is the length of the page:

See the Pen Block example: Default height and width by vrk (@bee-arcade) on CodePen.

The default height and width can be overwritten in CSS using height and width properties. If you set the height and not the width, the default width is still the entire length of the page:

See the Pen Block example: Set height, and width by vrk (@bee-arcade) on CodePen.

If there is no height and width set in CSS, and no content in the element, all you see is the border:

See the Pen Block example: No content with border by vrk (@bee-arcade) on CodePen.

If there is no height and width set in CSS, no content in the element, and no border, then the elements do not show up at all:

See the Pen Block example: No content, no border by vrk (@bee-arcade) on CodePen.

Top-to-bottom flow

Each element is laid out one on top of the other, regardless of the white space in HTML, and regardless of the size of the element:

See the Pen Block example 1: Top to bottom flow by vrk (@bee-arcade) on CodePen.

Inline elements

A <span> is an example of an inline element in HTML. Other examples include <strong>, <a>, <em>, etc. The following code snippets use <span> to show how block-level elements behave in the default rendering mode.

Inline element properties:

• The height of an inline element is the height of the content.
• The width of an inline element is the width of the content.
• The height and width of an inline element cannot be set in CSS.
• You cannot set the height and width of block-level elements in CSS
• Inline elements flow left to right, meaning inline elements appear on the same line unless the line wraps or there’s an explicit line break (<br/>)

Height and width of inline elements

The height and width of an inline element is exactly the height and width of the content.

See the Pen Inline example: Spans with content by vrk (@bee-arcade) on CodePen.

The box model still applies to inline elements, but the shape of the box is different: the box hugs the content of the line, and the box “snakes” to a second line if the inline element is long enough:

See the Pen Inline example: Spans with content by vrk (@bee-arcade) on CodePen.

If you try to set the height or width property in CSS, the properties are ignored:

See the Pen Inline example: Height not settable by vrk (@bee-arcade) on CodePen.

If there is no content and no border to your inline elements, nothing will be shown, even if you set a height and width. That is because height and width are not settable CSS properties for inline elements.

See the Pen Inline example: Spans without content by vrk (@bee-arcade) on CodePen.

Recall that the exact same CSS applies to a block element, such as <p>, does respect the height and width:

See the Pen Block example: blockss- without content by vrk (@bee-arcade) on CodePen.

Left-to-right flow

Each inline element is laid out on the same line right next to each other, wrapping to the next line if necessary. To force a line break, you need to explicitly use <br/>.

See the Pen Inline example: Left-to-right flow by vrk (@bee-arcade) on CodePen.