CSS Display
The most crucial CSS attribute for managing layout is the display property.
The display Property
An element’s display on a web page can be customized using the display attribute.
Every HTML element, regardless of its type, has a default display value. For most items, the display value by default is either block or inline.
HTML components can have their default display behavior changed using the display attribute.
Block-level Elements
Every block-level element begins on a new line and fills the entire available width, extending as far to the left and right as possible.
Examples of block-level elements:
- <div>
- <h1> – <h6>
- <p>
- <form>
- <header>
- <footer>
- <section>
Inline Elements
An inline element merely takes up the necessary width and DOES NOT begin on a new line.
This is an inline <span> element inside a paragraph.
Examples of inline elements:
- <span>
- <a>
- <img>
The display Property Values
The display property has many values:
| Value | Description |
|---|---|
| inline | Displays an element as an inline element |
| block | Displays an element as a block element |
| contents | Makes the container disappear, making the child elements children of the element the next level up in the DOM |
| flex | Displays an element as a block-level flex container |
| grid | Displays an element as a block-level grid container |
| inline-block | Displays an element as an inline-level block container. The element itself is formatted as an inline element, but you can apply height and width values |
| inline-flex | Displays an element as an inline-level flex container |
| inline-grid | Displays an element as an inline-level grid container |
| inline-table | The element is displayed as an inline-level table |
| list-item | Let the element behave like a <li> element |
| run-in | Displays an element as either block or inline, depending on context |
| table | Let the element behave like a <table> element |
| table-caption | Let the element behave like a <caption> element |
| table-column-group | Let the element behave like a <colgroup> element |
| table-header-group | Let the element behave like a <thead> element |
| table-footer-group | Let the element behave like a <tfoot> element |
| table-row-group | Let the element behave like a <tbody> element |
| table-cell | Let the element behave like a <td> element |
| table-column | Let the element behave like a <col> element |
| table-row | Let the element behave like a <tr> element |
| none | The element is completely removed |
| initial | Sets this property to its default value |
| inherit | Inherits this property from its parent element |
Display: none;
When using JavaScript, display: none; is frequently used to hide and show items without removing and recreating them. If you’re interested in learning how to accomplish this, have a look at our previous example found on this page.
The <script> element uses display: none; as default.
----- BOX MUKVU -----
Override The Default Display Value
Each element, as previously stated, has a default display value. You can, however, override this.
It is sometimes helpful to convert an inline element to a block element, or the other way around, in order to achieve a desired page style while adhering to web standards.
Creating inline <li> components for horizontal menus is a typical example:
Example
li {
display: inline;
}
Note: Recall that altering an element’s display property only affects how the element is shown; it has no effect on the element’s type. Therefore, it is not permitted for an inline element with display: block; to include another block element.
The following example displays <span> elements as block elements:
Example
span {
display: block;
}
The following example displays <a> elements as block elements:
Example
a {
display: block;
}
Hide an Element - display:none or visibility:hidden?
BOX MUKVU
One way to hide an element is to set its show attribute to none. The element will be concealed, and the page will appear as though it doesn’t exist:
Example
h1.hidden {
display: none;
}
visibility:hidden; also hides an element.
The element will still occupy the same amount of area, though. Even though the element is hidden, the layout is still affected:
Example
h1.hidden {
visibility: hidden;
}
CSS Display/Visibility Properties
| Property | Description |
|---|---|
| display | Specifies how an element should be displayed |
| visibility | Specifies whether or not an element should be visible |
