CSS Layout – The display Property
The display property decides how an element behaves in the layout. Every element has a default display type, and CSS can change it.
| Value | Behaviour |
|---|---|
block | Starts on a new line, takes the full width. Width and height work |
inline | Stays in the text line. Width and height do not work |
inline-block | Stays in the line, but width, height, padding and margin work |
none | The element is removed and takes no space |
flex | Flexbox container, see Flexbox |
grid | Grid container, see Grid |
span.box { display: inline-block; width: 100px; height: 40px; background: #81d4fa; }
li { display: inline; } /* list items in one line */
.hidden { display: none; }
Three inline-block boxes in one line
one two three
display: none or visibility: hidden?
| Rule | Result |
|---|---|
display: none | Hidden, and takes no space. The other elements move up |
visibility: hidden | Hidden, but its space stays empty |
Note:
Block elements like div can be shown in a line with inline-block, and inline elements like a can get a width and height the same way.
Summary
block= full line,inline= flows with text,inline-block= both.display: noneremoves the element from the layout.- Next: CSS Position.
Congratulations! Chapter Finished. Learn more about the similar topics:
| Exercises & Assignments |
|---|
| No Content Found. |
| Interview Questions & Answers |
|---|
| No Content Found. |