CSS Display

CSS display property is used to set how an HTML element should be displayed. It determines the type of box model used for the element and how it interacts with other elements on the page.

The display property can have several values, such as:

Display Block

The display:block property is used to display an element as a block-level box, which means it takes up the full width of its parent container and starts on a new line.

It is commonly used for headings, paragraphs, and other elements that need to be displayed as block-level boxes.

As an example:

Editor

Loading...

In this example:

• We have an h1 element and a p element that are both displayed as block-level elements by default.
• We've also added three span elements that we want to display as block-level elements using the display: block property.
• In the CSS, we've set the display: block property for the span elements and also added some other styles to give them a yellow background color, black border, and some padding and margin.

Display Inline

The display:inline property is used to display an element as an inline-level box, which means it does not take up the full width of its parent container and does not start on a new line.

As an example:

Editor

Loading...

In this example:

• We have an h1 element and a p element that are both displayed as block-level elements by default.
• We've also added three span elements that we want to display as inline-level elements using the display: inline property.
• In the CSS, we've set the display: inline property for the span elements and also added some other styles to give them a yellow background color, black border, and some padding and margin.
• We've set the margin-right property to 10 pixels to add some space between the span elements.

Display Inline-Block

The display:inline-block property is useful for displaying elements as inline-level boxes that can also have a width and height.

Helpful for creating navigation menus or other components that need to be displayed as inline-level boxes but also have a width and height.

As an example:

Editor

Loading...

In this example:

• We have an h1 element and a p element that are both displayed as block-level elements by default.
• We've also added three span elements that we want to display as inline-block-level elements using the display: inline-block property.
• In the CSS, we've set the display: inline-block property for the span elements and also added some other styles to give them a yellow background color, black border, and some padding and margin.
• We've set the margin-right property to 10 pixels to add some space between the span elements.

Display None

When the display:none property is used, the element is completely removed from the document flow and cannot be seen or interacted with.

As an example:

Editor

Loading...

In this example:

• We have an h1 element and a p element that are both displayed as block-level elements by default.
• We've also added a div element with an ID of "hideMe" that we want to hide using JavaScript when the user clicks a button.
• We've also added a button that will call the hideContent() function when clicked.
• In the CSS, we've set some styles for the div element with the "hidden" class to give it a yellow background color, black border, and some padding.
• In the JavaScript, we've defined a hideContent() function that retrieves the div element with the ID of "hideMe" using the document.getElementById() method.
• We then set the style.display property of this element to "none", which will apply the display:none property and hide the div element and its contents from view.

Display flex

The display:flex property is used to display an element as a flex container, which means it can be used to create flexible layouts with rows and columns.

As an example:

Editor

Loading...

In this example:

• we have an h1 element and a p element that are both displayed as block-level elements by default.
• We've also added a div element with a class of "container" that we want to display using the display:flex property.
• In the CSS, we've set the display:flex property for the div element with a class of "container". This will turn the div element into a flex container, which means that its child elements can be flex items.
• We've also set some additional flex properties for the container, including flex-direction: row to display the flex items in a row, justify-content: space-between to distribute the flex items evenly along the main axis with space between them, and align-items: center to align the flex items along the cross axis.
• We've also defined a box class for the child elements of the container.
• This class sets some basic styles for the flex items, including a pink background color, white text color, 20 pixels of padding, and 10 pixels of margin.
• We've also set flex-basis: 30% to give each flex item a basis size of 30% of the container's width.

Display Grid

The element is displayed as a grid container, which means it can be used to create complex layouts with rows and columns. It is commonly used for page layouts and forms.

As an example:

Editor

Loading...

In this example:

• We have an h1 element and a p element that are both displayed as block-level elements by default.
• We've also added a div element with a class of "container" that we want to display using the display:grid property.
• In the CSS, we've set the display:grid property for the div element with a class of "container".
• This will turn the div element into a grid container, which means that its child elements can be grid items.
• We've also set some additional grid properties for the container, including grid-template-columns: repeat(3, 1fr) to define a grid with three columns of equal width, and grid-gap: 20px to add a 20-pixel gap between grid items.
• We've also defined a box class for the child elements of the container.
• This class sets some basic styles for the grid items, including a pink background color, white text color, 20 pixels of padding, and 10 pixels of margin.
• We've also set text-align: center to center the text inside each grid item, and font-size: 24px to make the text larger.

Display None vs Visiblity Hidden

display:none and visibility:hidden are both CSS properties used to hide elements on a webpage.

However, they work in slightly different ways:

• display:none completely removes the element from the document flow, meaning it takes up no space on the page and cannot be interacted with. Any child elements or content within the element will also be hidden. The element is effectively deleted from the page, and cannot be seen or accessed by the user.

• visibility:hidden hides the element from view, but it still takes up space on the page and can be interacted with. The element is not deleted from the page, and any child elements or content within the element will still take up space. However, the element is invisible and cannot be seen by the user.

As an example:

Editor

Loading...

In this example:

• We have a div element with the ID "myDiv" that contains the text "Hello, world!".
• There are also two buttons that call JavaScript functions when clicked: hideElement() and showElement().
• The hideElement() function sets the display property of the myDiv element to "none", effectively hiding it from the page.
• The showElement() function sets the display property back to "block", showing the element again.

tip

We could also use visibility:hidden instead of display:none to hide the element.