Learn about CSS label display mode in one article

Tag type (display mode) HTML tags are generally divided into two types: block tags and inline tags, which are also called block elements and inline elements.

1. Block-level elements

Each block element usually occupies one or more entire lines on its own. You can set its width, height, alignment and other attributes. It is often used in building web page layout and structure.

Common block elements include <h1>~<h6>, <p>, <div>, <ul>, <ol>, <li>, etc., among which the <div> tag is the most typical block element.

Features: (Important)

1. Occupies one row of the parent, and the width is 100% of the container by default;

2. Height, line height, outer margin and inner margin can all be controlled; (support width and height settings)

3. Do not set the height, the height is determined by the content;

4. Can accommodate inline elements and other block elements;

2. Inline-level

Inline elements do not occupy an independent area and only rely on their own font size and image size to support the structure. Generally, attributes such as width, height, and alignment cannot be set. They are often used to control the style of text on the page.

Common inline elements include <a>, <strong>, <b>, <em>, <i>, <del>, <s>, <ins>, <u>, <span>, etc. Among them, the <span> tag is the most typical inline element.

Features: (Important)

1. When the elements in the adjacent row are on the same line, there will be a gap when the line breaks;

2. Height and width are invalid, but horizontal padding and margin can be set, but vertical padding and margin are invalid; (width and height are not supported)

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

4. Inline elements can only contain text or other inline elements. (aSpecial)

Tips:

1. Only text can form a paragraph, so block-level elements cannot be placed in p. Similarly, these tags h1, h2, h3, h4, h5, h6, dt are all text block-level tags, and other block-level elements cannot be placed in them.

2. Links cannot be placed within links.

3. The difference between block-level elements and inline elements

See above for their respective characteristics.

4. Inline-block

There are several special tags in the inline elements - <img />, <input />, <td>, you can set their width, height and alignment attributes, they are called inline block elements.

Features:

1. On the same line as adjacent inline elements (inline blocks), but with a blank gap between them;

2. The default width is the width of its own content;

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

5. Label display mode conversion display

When designing a web page, you may need to set different display modes for different tags. This can be achieved through display.

1. Block transfer to inline: display:inline;

2. Convert to block within the line: display:block;

3. Convert block and inline elements to inline blocks: display: inline-block;

Knowledge point supplement: display mode of CSS tags

Label display mode

a. Block-level elements (most typically div tags)

Features:

Default width 100%

Can accommodate block-level elements and inline elements

b. Inline elements (most typically the span tag)

Features:

c. Inline block elements (most typically the img tag)

! ! ! 3 modes of labels are convertible

display (display model attributes)

a. Convert block-level tag mode to inline tag mode

div{display:inline;}

b. Convert the inline tag mode to block-level tag mode

span{display:block;}

c. Convert the inline tag mode to inline block tag mode

a{display: inline-block;}

Summarize

This is the end of this article about CSS tag display mode. For more relevant CSS display mode content, please search 123WORDPRESS.COM’s previous articles or continue to browse the related articles below. I hope everyone will support 123WORDPRESS.COM in the future!