What does the display attribute in css do?

The display attribute in css is used to specify the type of box that the element should generate. The display attribute is a commonly used attribute in front-end development. Commonly used attribute values ​​include block, none, inline, and inline-block.

#Every element on the web page is a rectangular box. The display attribute specifies the type of box the element should generate. The display attribute is an attribute we often use in front-end development.

(Learning video recommendation: css video tutorial)

Introduction to common attribute values:

block The default value of the block object. Add a new line after the object with this value

none to hide the object. Unlike the hidden value of the visibility attribute, it does not retain its physical space for the hidden object

inline The default value of the inline object. Use this value to remove the line

inline-block inline block element from the object. This attribute value combines the characteristics of inline and block, that is, it is both an inline element and can set width and height.

1. display:block

1. block: The element will be displayed as a block-level element, with line breaks before and after the element. It is usually used to convert inline elements into block-level elements. use. So what are block-level elements? What are inline elements?

2. Block-level elements:

are always displayed in the form of a block, occupying an entire line. Several sibling block elements will be arranged from top to bottom (except when using the float attribute).

You can set the height, width, outer patch (margin) in each direction, and inner patch (padding) in each direction.

When the element width (width) is not set, its width is 100% of its container, unless we set a fixed width for it.

Block-level elements can be nested within other block-level elements or inline elements.

The display attribute value of block-level elements defaults to block.

3. Inline elements

It will not occupy a whole line alone, but only occupy the space where its own width and height are. That is, the width and height of the element are determined by its text. Open the content. Several sibling inline elements will be arranged from left to right (that is, an inline element can be on the same line as other inline elements), and from top to bottom.

The height and width of inline elements cannot be set. The height is generally determined by the size of its font, and its width is controlled by the length of the content.

Inline elements can only set left and right margin values ​​and left and right padding values, but cannot set upper and lower margin values ​​and upper and lower padding values. Therefore, we can change the width of inline elements by setting the left and right padding values.

Inline elements generally cannot contain block-level elements.

The display attribute value of block-level elements defaults to inline.

2. display:none

The value of display:none indicates that the element is not displayed. When you want an element to be hidden, you can set this attribute for an element and it will disappear from the web page. However, the element is not deleted from the document. It is just hidden in the web page structure and not displayed on the web page. But if you want the element to be displayed, you can set display:block to the element, and the element can be displayed on the web page.

3. display:inline

The function of display:inline can convert a block-level element into an inline element. Then this block-level element will no longer be able to set the width, height, and up and down margins. and padding. The actual width and height of this block-level element are auto, not the values ​​we set.

4. display:inline-block

Judging from the name, we can get that it combines inline and block and retains their characteristics. Therefore, the element with the inline-block attribute set not only has the feature that the block element can set the width and height attributes, but also maintains the feature that the inline element does not wrap.

Related recommendations: CSS tutorial

The above is the detailed content of What does the display attribute in css do?. For more information, please follow other related articles on the PHP Chinese website!