Display Property
The display property is one of the most important properties for layout control. The float property was often used previously. After the display property was introduced, the display property became the mainstream of layout control.
The display property has a lot of functionalities. It can change the type of elements – inline element, block element, inline-block element by setting the property value of inline, block, or inline-block. Another key functionality is to change the element layout approaches such as Flex Box or Grid layout by setting the property value of flex or grid. It can also be used to hide elements by setting a property value of none. Furthermore, it can change an element to another element type such as a table or list.
inline, block, and inline-block
Previously, you could not switch between inline elements and block elements. The introduction of the display property enabled you to switch between them. Inline-block elements are also introduced along with the display property. The inline-block element, which has aspects of both an inline element and a block element, is useful when you manage a layout. We'll explain inline-block in the next sections.
display: none
When you set none in the display property, the element disappears in the browser. This property is often used with JavaScript. For example, for a membership website, you may want to show special content only for members and hide the content for guest users. To implement this, you can change the display property to none when the user is a guest user.
Flex Box (Flexible Box) Layout and Grid Layout
When you set flex or grid in the display property of a parent element, the parent element becomes a container that controls the layout of its child elements. When you set flex, the layout approach becomes Flex Box (Flexible Box) Layout. When you set grid, the layout approach becomes Grid Layout. When you set inline-flex or inline-grid, the parent element (the container) itself behaves like an inline-block element, which can be placed in the same line horizontally. We'll explain Flex Box Layout in the next chapter. For Grid Layout, refer to our next course HTML & CSS Intermediate.
float
Although the display property became the mainstream of layout control, the float property can still be used. For example, it can be used for the image element float setting that was explained in a previous chapter.
The display property is one of the most important properties for layout control. The float property was often used previously. After the display property was introduced, the display property became the mainstream of layout control.
The display property has a lot of functionalities. It can change the type of elements – inline element, block element, inline-block element by setting the property value of inline, block, or inline-block. Another key functionality is to change the element layout approaches such as Flex Box or Grid layout by setting the property value of flex or grid. It can also be used to hide elements by setting a property value of none. Furthermore, it can change an element to another element type such as a table or list.
inline, block, and inline-block
Previously, you could not switch between inline elements and block elements. The introduction of the display property enabled you to switch between them. Inline-block elements are also introduced along with the display property. The inline-block element, which has aspects of both an inline element and a block element, is useful when you manage a layout. We'll explain inline-block in the next sections.
display: none
When you set none in the display property, the element disappears in the browser. This property is often used with JavaScript. For example, for a membership website, you may want to show special content only for members and hide the content for guest users. To implement this, you can change the display property to none when the user is a guest user.
Flex Box (Flexible Box) Layout and Grid Layout
When you set flex or grid in the display property of a parent element, the parent element becomes a container that controls the layout of its child elements. When you set flex, the layout approach becomes Flex Box (Flexible Box) Layout. When you set grid, the layout approach becomes Grid Layout. When you set inline-flex or inline-grid, the parent element (the container) itself behaves like an inline-block element, which can be placed in the same line horizontally. We'll explain Flex Box Layout in the next chapter. For Grid Layout, refer to our next course HTML & CSS Intermediate.
float
Although the display property became the mainstream of layout control, the float property can still be used. For example, it can be used for the image element float setting that was explained in a previous chapter.
