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:
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:
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:
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:
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:
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:
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:
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.
We could also use visibility:hidden instead of display:none to hide the element.