CSS display property

The display property defines that how an element should behave in between the other elements. Whether it should be on the same line or on the next line i.e. inline-block and block.

There are many values of the display property. All of the values have been described below.

inline

The elements that take the space as least as possible. And they don't start on the new line. For example, <i>, <b>, <em> etc.

<style>
p{display:inline;}
</style>
Try </>

In the above example, b and i are inline elements. But <p> is block level element by default. This property converts <p> to inline element.

block

The behavior of block level elements is opposite to that of inline level elements. They always start on the new line and occupy the maximum space.

<style>
code{display:block;}
</style>
Try </>

code element is inline element by default. But this property converts <em> to block level element.

A complete list of inline and block level elements have been given in the element types tutorial.

Inline-block

This value defines an inline box. But inside of the inline-block box is block level elements. The inline-block itself is a block level element.

<style>
ul{display:inline-block;}
</style>
Try </>

list-item

It can be used as the replacement of the <li> element. Here, the values of position and list-style of markers can be defined.

<style>
div{display:list-item;}
</style>
Try </>

<div> element is a replacement of <li>.