Display in CSS
Display in CSS
Display in CSS determines how an HTML element should be displayed on a webpage. It controls the layout and rendering of an element and affects its box type, dimensions, and position.
There are several values that can be used with the Display in CSS property:
- block: This value creates a block-level element that takes up the full width of its container and stacks vertically with other block-level elements. Examples of block-level elements include <div>, <p>, and <h1>–<h6>.
- inline: This value creates an inline-level element that takes up only the space it needs and does not create a new line. Examples of inline-level elements include <span>, <a>, and <img>.
- inline-block: This value creates an element that is displayed as an inline-level element but has the features of a block-level element. It takes up only the space it needs and can have margins, padding, and borders. Examples of inline-block elements include <input> and <button>.
- none: This value hides the element from the page and does not reserve any space for it. The element is completely removed from the document flow.
- flex: This value creates a flexible container that allows the child elements to be laid out in a row or a column, depending on the flex-direction It is used for building responsive layouts and adjusting the position of child elements.
These are some of the most common values for the display property, but there are others as well. By using the display property, you can control the layout and rendering of an element and create complex webpage layouts.
Top of Form
Example:
- Block-level element:
div {
display: block;
width: 200px;
height: 200px;
background-color: blue;
}
In this example, we’ve set a div element to be a block-level element, with a width and height of 200 pixels and a blue background color. The div element will take up the full width of its container and stack vertically with other block-level elements.
- Inline-level element:
span {
display: inline;
background-color: yellow;
}
In this example, we’ve set a span element to be an inline-level element, with a yellow background color. The span element will take up only the space it needs and will not create a new line.
- Inline-block element:
button {
display: inline-block;
width: 100px;
height: 50px;
background-color: green;
color: white;
border: none;
padding: 10px;
margin: 5px;
}
In this example, we’ve set a button element to be an inline-block element, with a width and height of 100 pixels, a green background color, and white text color. We’ve also added padding and margins to the element to create space around it. The button element will take up only the space it needs but will have the features of a block-level element, including the ability to have margins, padding, and borders.
- None:
.hidden {
display: none;
}
In this example, we’ve set a class called hidden to have a display property of none. Any element with the hidden class will be completely hidden from the page and will not reserve any space for it.
These are just a few examples of how the display property can be used to control the layout and rendering of HTML elements.
Conclusion