“display” property in CSS


In this post we will learn four possible values of “display” property in CSS.

1. block: This makes the element a block box. It won’t let anything sit next to it on the page! It takes up the full width.

2. inline-block: This makes the element a block box, but will allow other elements to sit next to it on the same line.

3. inline: This makes the element sit on the same line as another element, but without formatting it like a block. It only takes up as much width as it needs (not the whole line).

4. none: This makes the element and its content disappear from the page entirely!

note: The inline-block value allows you to put several block elements on the same line. The inline value places all your elements next to one another, but not as blocks: they don’t keep their dimensions.

The inline-block value allows you to put several block elements on the same line. The inline value places all your elements next to one another, but not as blocks: they don’t keep their dimensions.

inline places all your elements on a single line. Also, it doesn’t maintain their “box”ness: as you can check, all your elements will go squished to the smallest possible width!

Happy reading!

(0)

Leave a Reply

Your email address will not be published. Required fields are marked *