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
<span class="keyword" style="box-sizing:border-box;">inline</span>-block value allows you to put several block elements on the same line. The <span class="keyword" style="box-sizing:border-box;">inline</span> 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!