display property

The display property defines how a element must be show on the page.

value description
none Hides a element and all its descendants so that it has no effect on layout. For example, <script> element.
block Shows element as block. By default, element will fill parent by width, and wrap content by height.
Line breaks will be generated before and after of the element. So sequence of elements will be have vertical linear layout.
<!-- default display of <div> is block --> 
<div style="width:100%;  border: 2px solid red">
  <div style="border: 2px solid blue"> content <br> content
  </div>
  <div style="border: 2px solid green">content <br><br> content </div>
</div>
content
content
content

content
inline Shows element like a text string. It will try wrap content first by horizontal direction, then vertical direction. All this means, that you can't assign size of element and vertical margins/padding. No line breaks generated. So next element will be on same line if there is space.
If in the html code between elements at least one line break or space, then white space will be rendered between elements.
<div style="width:100%; border: 2px solid red">
  <div style="border: 2px solid blue; display: inline;">content  
   content</div><div style="border: 2px solid green; 
   display: inline;width: 100px; height: 100px;"> content</div>
<br>
<div style="border: 2px solid blue; display: inline;">content  
content</div> <div 
     style="border: 2px solid green; display: inline;">content</div>
</div>
content content
content

content content
content
list-item The element behaves like a block element and can show list item marker.
flex The element behaves like a block element and lays out its content according to the flexbox model.
grid The element behaves like a block element and lays out its content according to the grid model.
inline-block The element behaves like a block element without generating line breaks. This means you can assign size of element and vertical margins/paddings and next non-block element will be on same line if there is space. For example, <input> element.
inline-flex The element behaves like a inline element and lays out its content according to the flexbox model.
inline-grid The element behaves like a inline element and lays out its content according to the grid model.
inline-table The element behaves like a inline <table> element.
table* There are some values thats behaves like corresponding table elements
  • table - <table>
  • table-row - <tr>
  • table-header-group - <thead>
  • table-row-group - <tbody>
  • table-footer-group - <tfoot>
  • table-column-group - <colgroup>
  • table-cell - <th>, <td>
  • table-caption - <caption>