The Box Model

The CSS Box Model

Every HTML element is a rectangular box with four layers:

┌─────────────────────────────┐
│           margin            │
│  ┌───────────────────────┐  │
│  │        border         │  │
│  │  ┌─────────────────┐  │  │
│  │  │     padding     │  │  │
│  │  │  ┌───────────┐  │  │  │
│  │  │  │  content  │  │  │  │
│  │  │  └───────────┘  │  │  │
│  │  └─────────────────┘  │  │
│  └───────────────────────┘  │
└─────────────────────────────┘

By default, width and height only size the content box — padding and border add to the total size. Fix this with:

* {
  box-sizing: border-box;
}

With border-box, width includes padding and border — much easier to reason about.

.box {
  width: 200px;      /* total width including padding & border */
  height: 100px;
  padding: 16px;
  border: 2px solid black;
  box-sizing: border-box;
}

Your Task

Set box-sizing: border-box globally and create two boxes with explicit width and height.