What Are the Values of Display in CSS? What Is the Difference Between inline, block and inline-block? What Is the Difference Between display:none and visibility:hidden?

In css interview questions, display value is a very basic question, everyone must be very familiar with this type of question. The extended question will ask what the difference is between inline elements and block elements (inline and block), flex and grid, etc.

What is the display property?

CSS display property is used to determine whether an element will have block or inline characteristics. If the value of display is set to grid or flex, it will determine how the child elements of this element will be arranged.

What are the values of display?

The most common values of display are block, inline, inline-block, none, flex, grid, and table.

What is the difference between block, inline, and inline-block?

The previous paragraph mentioned that the display property can be used to determine whether an element will have block or inline characteristics. Generally, most elements will have a default display property. For example, the default of div is block, and the default of span is inline.

display: block

The element with the display value of block is also called a block element, and common block elements are <div>, <h1>, <p>. Block elements will inherit the width of the parent element by default, and will occupy a line by themselves; the height is usually based on the height of the element, and you can also change the width and height of the element by setting the width, height, max-width, and max-height CSS properties.

display: inline

The element with the display value of inline is also called an inline element, common inline elements are <a>, <img>, <span>, and the use scenario may be used in a paragraph of emphasized text. Inline elements themselves will not occupy a line by themselves, but will be arranged in the same column with other inline elements. The element cannot change the height and width by setting the width, height, max-width, and max-height values, and the height and width will be stretched according to the content of the element itself.

display: inline-block

The inline-block combines the characteristics of inline elements and block elements. It will be arranged in the same line like inline elements, but at the same time it has the characteristics of block elements that can set the width and height.

The following figure shows the comparison of these three:

• The top is display: block, the element will occupy a line by itself
• The middle is display: inline, the element will be arranged in the same line
• The bottom is display: inline-block, the element will be stretched according to the content, and will be arranged in the same line

Bonus question: What is the difference between display:none and visibility:hidden?

none is also a value of display, and setting the display value to none will hide the element. In CSS, there is another CSS property setting: visibility:hidden can achieve a similar effect.

But there are important differences between the two. display:none will completely remove the element from the page, including the space it occupies, while visibility:hidden will only hide the element, but the space occupied by the element will still be reserved, and the element will still affect the page layout.

The following figure shows the difference between display:none and visibility:hidden:

• The left figure is visibility:hidden, the element will be hidden, but the space occupied will still exist
• The right figure is display:none, the element will be hidden, and the space occupied will also be removed