Please explain me display in css.

Question

Thanks ☺

Answer 1

Nice explanation by arthur, but there is a LOT more than three values!

The most important one, display: inline-block;
an inline element that has width and height like a block element, best of both worlds really

And my favourite.. display: flex/inline-flex;
people have realized that all those display values are confusing and messy when trying to do complicated layouts, so they made flex to rule them all. Long topic though... Check it out some time, once you run into problems with just block/inline/inline-block :)

Here's a full list of all the display values: https://developer.mozilla.org/en/docs/Web/CSS/display

Answer 2

The 'display' property in CSS is a key part of your element's layout. There are three values you can assign to the property:

block: this will display the element on a new line and the element will stretch horizontally (left and right) as far as it can. Some tags that are displayed in blocks by default: div, p, h1, h2, h3, ...

inline: this will display the element on the same line as the previous element. This is often used on 'li' tags to display lists horizontally (left to right) instead of vertically (top to bottom). Some tags that are displayed inline by default: span, a, img, ...

none: this will simply not display the element. The layout of other elements will be as if the first element is not on the page.

Answer 3

thank you Arthur Busser 👍

Answer 4

thank you Schindlabua