Your One-Stop Guide to Master the Display Property in CSS

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. 

Here, you will explore the following topics: 

  • What is CSS display property?
  • CSS Display Inline
  • CSS Display Inline-block
  • CSS Display None
  • Other CSS Display
  • Browser Support

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

Stand Out From Your Peers this Appraisal Season

Start Learning With Our FREE CoursesEnroll Now
Stand Out From Your Peers this Appraisal Season

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-inline-display

inline-output

CSS Display Inline-Block

The inline-block displays the element as block-level elements. Elements react to the width and height properties.

inline-block

inline-block-output

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-block

css-block.

Full Stack Web Developer Course

To become an expert in MEAN StackView Course
Full Stack Web Developer Course

CSS Display None

The CSS Display value none when used turns the display of the element off. It will not occupy any space.

css-none

css-none-output

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!

About the Author

Aryan GuptaAryan Gupta

Aryan is a tech enthusiast who likes to stay updated about trending technologies of today. He is passionate about all things technology, a keen researcher, and writes to inspire. Aside from technology, he is an active football player and a keen enthusiast of the game.

View More
  • Disclaimer
  • PMP, PMI, PMBOK, CAPM, PgMP, PfMP, ACP, PBA, RMP, SP, and OPM3 are registered marks of the Project Management Institute, Inc.