Cascading Style Sheets (CSS) are used to define the way in which HTML elements are required to be displayed. It is a method to add style (e.g., fonts, colors, spacing) to web documents. In this tutorial, you will learn about CSS Display Property.
What is CSS Display Property?
The CSS display property controls the layout of the element on the page. The default value of the display property is block or inline.
The following table will explain the usage and the version history of this property.
|
Default value: |
inline |
|
Applies to: |
All elements |
|
Inherited: |
No |
|
Version: |
CSS 1,2,3 |
Syntax:
display: inline | block | contents | flex | flow | flow-root | grid | inline-block | inline-flex | inline-grid | inline-table | list-item | run-in | table | table-caption | table-column-group | table-header-group | table-footer-group | table-row-group | table-cell | table-column | table-row | none | initial | inherit
CSS Display Inline
The inline value of the display property generates an inline-level box-like <span> or <a> element. The inline element assumes only the width required.
CSS Display Inline-Block
The inline-block displays the element as block-level elements. Elements react to the width and height properties.
Here, you can see that this demo has specified the width for the element.
CSS Display Block
The block value of the display property makes an element behave like a block-level element, like a <div> or <p> element.
CSS Display None
The CSS Display value none when used turns the display of the element off. It will not occupy any space.
Other CSS Display Value
Value |
Description |
|
inline |
It is used to generate an inline element box |
|
block |
It displays the element as a block-level element |
|
flex |
It displays the element as a flex container |
|
inline-block |
It displays the element as an inline-level block container |
|
none |
It is used to remove the element |
|
inherit |
The element will inherit the display from its parent element |
|
table |
The elements will behave like an HTML table element |
|
run-in |
It displays the element as inline or block level, based on the context |
Browser Support
Chrome |
Mozilla |
Safari |
Opera |
|
4.0 |
3.0 |
3.1 |
7.0 |
Get skilled in HTML5 and CSS3 with the Full Stack Java Developer Master's Program. Click to check out the program details!
Conclusion
So in this CSS display tutorial, you have learned about several values of display property that can be used on the web page.
Simplilearn's Postgraduate Program in Full Stack Web Development is a comprehensive course in collaboration with Caltech CTME that will help you master the skills of coding techniques from a ground level and help you gain all that you need to be a full-stack software development expert.
If you have any queries, or feedback concerning this CSS Display tutorial, do reach out to us by placing your inputs in the comments section towards the bottom of this page. Our team of SMEs will review and respond to your comments soon.
Happy learning!
