Block and Inline Element : Web Design

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:

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:

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

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.

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:

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.

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:

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

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.

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

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/>.