CSS Display

❮ Prev Next ❯

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.

syntax

display : value;

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.

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 :

p.inline{
    display:inline;
}

▶ 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 :

b.block,
em.block{
    display:block;
}

▶ 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 :

.inlineblock{
    display: inline-block;
}

▶ Run the code

body{
    display: inline;
}
p.my_class{
    display: inherit;
}

▶ Run the code

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

.my_class{
    display: none;
}

▶ Run the code

More Learning

Want to learn more about programming and web development? We have a few recommendations for you.

❮ Prev Next ❯