Block-level, inline, inline block-level element basics for HTML

Concept

Block-level: block

Inline: Inline

Inline block level: Inline-block

In an HTML element, the element will have the display property

The default value of the Display property is block, then the element is a blocks-level element.

The default value of the Display property is inline, and the element is an inline element.

The display default value without elements is inline-block.

Display property values can be set, such as the block-level element div display value can be set to inline, then it becomes an inline element, no longer walk alone.

Characteristics

1. Block-level elements

Exclusive row.

Width,height,margin,padding can be set.

The interior can contain block-level or inline elements.

2. Inline elements

Display with other inline elements.

Setting Widht,height,margin-top,margin-bottom,padding-top,padding-bottom is not valid, you can set Margin-left,margin-righ,padding-left, Padding-right.

The inner can contain block-level or inline elements, when the block-level elements are included inside, the block-level element continues to be displayed alone, and the next inline element is displayed in a newline.

3.inline-block

Display with other inline elements.

As with block-level elements, you can set width,height,margin,padding.

The inner can contain block-level or inline elements that, when contained inside a block-level element, are shown alone within the inline element, without affecting the next inline element's display.

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.

Block-level, inline, inline block-level element basics for HTML