Block-level, inline, and inline block-level element basics of html

Block-level, inline, and inline block-level element basics of html

Concept

Block level: block

Inline: inline

Inline block level: inline-block

 

In html elements, the element has the display attribute.

The default value of the display attribute is block, so this element is a block-level element.

The default value of the display attribute is inline, so this element is an inline element.

The default value of display without elements is inline-block.

The value of the display attribute can be set. For example, you can set the value of the display of the block-level element div to inline, so it becomes an inline element and will not be displayed independently.

 

Features

1. Block-level elements

Exclusive row.

You can set width, height, margin, and padding.

It can contain block-level or Inline elements.

2. inline Elements

And other inline elements.

Setting widht, height, margin-top, margin-bottom, padding-top, and padding-bottom is invalid. You can set margin-left, margin-righ, padding-left, and padding-right.

It can contain block-level or Inline elements. When a block-level element is contained inside, the block-level element is displayed independently, and the next inline element is displayed with a line break.

3. inline-block

And other inline elements.

You can set width, height, margin, and padding like block-level elements.

It can contain block-level or Inline elements. When a block-level element is contained inside, this block-level element is displayed independently within the inline element, without affecting the row-level display of the next inline element.

Common block-level elements

Div, form, p, table, h1 ~ H6, hr, dl, ol, ul, pre, etc.

 

Common inline Elements

A, img, input, span, br, select, strong, em, textarea, label, etc.