What is the difference between inline elements and block-level elements?

Block-level elements

1. Always start on a new line

2. Height, line height, margins and The inner margins can be controlled

3. The default width is 100% of the browser

4. Inline elements and other block elements can be accommodated

Inline elements

1. On the same line as adjacent elements

2. The height and width are invalid, but the padding and margin in the horizontal direction can be set, and the vertical direction is invalid

3. The default width is the width of its own content

4. Inline elements can only accommodate text or other inline elements (except a)

(Video tutorial recommendation: css Video tutorial)

Note:

1. Only text can form a paragraph, so block-level elements cannot be placed in p. Similarly, there are these tags h1 -h6, dt, etc., they are all text block-level tags, and other block-level elements cannot be placed inside them

2. Links cannot be placed inside links

Block-level elements Differences from inline elements

Characteristics of block-level elements:

1. Always start on a new line

2. Height, line Height, margins and padding can all be controlled

3. The default width is 100% of the browser

4. Inline elements and other block elements can be accommodated

Characteristics of inline elements:

1. On the same line as adjacent inline elements

2. Height and width are invalid, but horizontal padding and margin can be set. The vertical direction is invalid

3. The default width is the width of its own content

4. Inline elements can only accommodate text or other inline elements (except a)

Inline-block tags

There are several special tags in inline elements-, ,

, you can control them Set the width, height and alignment properties. Some sources may call them inline block elements.

Features:

1. On the same line as adjacent inline elements (inside the row), but there will be a blank gap between them;

2 , the default width is the width of its own content

3. Height, line height, outer margins and inner margins can all be controlled

Label display mode conversion display

Convert block to inline: display:inline;

Convert inline to block: display:block;

Convert block and inline elements to inline block: display:inline-block;

Recommended tutorial: css quick start

The above is the detailed content of What is the difference between inline elements and block-level elements?. For more information, please follow other related articles on the PHP Chinese website!