# Display & Box Sizing — CSS

Source: https://www.geekswithgeeks.com/en/css/css-display-boxsizing

> 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.

```css
.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.