Block And Inline - CS193X: Web Programming Fundamentals

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.