4 min read
•Question 5 of 49easyWhat are CSS Display Values?
Understanding block, inline, inline-block, flex, grid, and none.
What You'll Learn
- Common display values
- Block vs inline behavior
- Modern layout values
Display Values
| Value | Behavior |
|---|---|
| block | Full width, new line |
| inline | Content width, same line |
| inline-block | Inline but accepts width/height |
| flex | Flexbox container |
| grid | Grid container |
| none | Removes from layout |
Examples
styles.cssCSS
/* Block - full width */
div { display: block; }
/* Inline - flows with text */
span { display: inline; }
/* Inline-block - inline with dimensions */
.btn {
display: inline-block;
width: 100px;
height: 40px;
}
/* Hide element */
.hidden { display: none; }