Tutorials Tonight
Follow Us

CSS Display

CSS display property controls how the elements of HTML will look on the web page.

Every element in HTML has a default display property and using CSS we can control this property.

Default value of display property is inline.


display : value;

CSS Display Values

  1. display: inline;
  2. display: block;
  3. display: inline-block;
  4. display: inherit;
  5. display: none;

value properties
inline Displays the element as inline element
block Displays the element as a block element
contents It makes the container disappear only content is visible.
flex It makes the element block level flex element
grid It makes the element block level grid element
inline-block It displays the element as inline-block.Unlike inline here you can add height and width to the element
inline-flex It displays the element as inline-flex
inline-grid It displays the element as inline-grid
inline-table It displays the element as inline-table
list-item It displays the element as list item
run-in It displays the element block or inline and it depends on the content
table Element behaves like a table. i.e - <table>
table-caption Elements behave like table-caption. i.e - <caption>
table-cell Element behaves like a table-cell. i.e - <td>
table-column Element behaves like a table-column. i.e - <col>
table-row Element behaves like a table-row. i.e - <tr>
initial Set display value to initial value
inherit Takes display value from the parent element
none The element is not visible

From the above list here are few important examples.

1).Display inline

The inline value displays the element within the line.It does not change line or take any extra space.

As we have mentioned above every HTML element have some default display value.So the elements having inline as a default value are :

  • <span>
  • <em>
  • <a>
  • <b> etc.

▶ Run the code

2).Display block

The block value displays the elements from the new line as content reached maximum available width for that element.

The elements having inline as a default value are :

  • <p>
  • <h1 - h6>
  • <div>
  • <section> etc.

▶ Run the code

3).Display inline-block

The inline-block value displays the elements within the line. Using inline-block value you can also set the height and width of the elements.

The elements having inline-block as a default value are :

  • <button>
  • <select>

    display: inline-block;
▶ Run the code

    display: inline;
    display: inherit;
▶ Run the code

5).Display None

The none display value removes the element.The element does not take any space.

    display: none;
▶ Run the code

Follow Us