Lesson 7 / 28

Display & Box Sizing

Control how a box flows, and whether padding/border grow its size.

display values

block takes the full line width and stacks. inline flows with text and ignores width/height. inline-block flows inline but accepts width/height. none removes the box entirely.

display in practice

display: none removes the element from layout — different from visibility: hidden, which keeps its space.

.badge {
  display: inline-block;
  width: 60px;
  padding: 4px;
}

.hidden {
  display: none;
}

box-sizing

By default (content-box), padding and border add to the width you set. box-sizing: border-box makes width include padding and border, so the box stays the size you declared.

The universal reset

Almost every project starts with * { box-sizing: border-box; } — it makes width/height math predictable everywhere.