The box model in CSS

Content, padding, border and margin — and why border-box is kinder.

.field {
  box-sizing: border-box;
  width: 100%;
  padding-block: 0.5rem;
  padding-inline: 0.75rem;
  border: 1px solid #2a2f3a;
  margin-block-end: 1rem;
}

.tight {
  margin: 0;
  padding: 0;
}

How it works

1. border-box includes padding and border in the width.
2. Logical properties like padding-inline follow writing direction.
3. Margins collapse between siblings; padding never does.

Keywords and builtins used here

• border
• field
• margin
• padding
• px
• rem
• tight
• width

The run, in numbers

Lines

13

Characters to type

181

Tokens

47

Three-star pace

75 tpm

At the three-star pace of 75 tokens a minute, this run takes about 38 seconds.

Type this snippet

Step 1 of 6 in Boxes, step 14 of 26 in Selectors & the box model.

← Previous Next →