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.
syntax
CSS Display Values
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.
Example
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.
Example
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>
Example
Example
5).Display None
The none display value removes the element.The element does not take any space.
Example