Display: block inline flex grid basics
Switch between display values and see how block, inline, flex, and grid each arrange content differently.
The display Property
The display property is the most important CSS property for layout. It controls how an element participates in the layout flow and how its children are arranged. The most used values: block, inline, inline-block, flex, grid, and none.
display: block
Block elements take up the full width of their container and start on a new line. Examples: <div>, <p>, <h1>. You can set width, height, margin, and padding on block elements.
.card {
display: block;
width: 100%;
margin-bottom: 24px;
}All lessons in this course
- Selectors and the Cascade
- Colors Typography and the Box Model
- Display: block inline flex grid basics
- Positioning: relative absolute fixed sticky