The Box Model, Position and Overflow

For CSS, every element on a page is a box. Today you work out how big a box really is, place boxes exactly and add shadows.

Quick check

Remember: inside or outside?

10 XP

A quick question from lesson 3.3. It is optional.

The box model

The browser draws every element as a rectangle with four layers. From the inside out: the content, the padding (it shows the background colour), the border and the margin (empty space outside the box).

Calculator

Box size calculator

Required 15 XP

Block and inline

Block elements like headings (h1 to h6), p and div take the whole line, from left to right. Inline elements like a, em, strong and img take only the space they need, inside the line. Tables have their own display type. You can change this:

a { display: block; }   /* the link takes the whole line */
p { display: inline; }  /* the paragraph takes only its own space */

display: inline-block mixes both (lesson 3.5).

Position

Value	What it does
static	The default: the normal flow, from top to bottom. top and left do nothing.
relative	Moves the element from its own place; its old space stays. Often used on a box that holds absolute children.
absolute	Takes the element out of the flow and places it inside its nearest positioned parent. With no positioned parent, it is placed on the page.
fixed	Stays in the same place on the screen while the page scrolls, like a chat button.
sticky	Scrolls with the page until it reaches an edge, then stays there.

You place the box with top, right, bottom and left. When boxes overlap, z-index decides which one is in front: the higher number. It works on positioned elements and on flex and grid items; -1 puts a box behind the others.

.red-box {
  position: absolute;
  top: 20px;
  left: 20px;
  width: 100px;
  height: 100px;
  z-index: 2;   /* higher: in front */
  background-color: red;
}
.blue-box {
  position: absolute;
  top: 40px;
  left: 40px;
  width: 100px;
  height: 100px;
  z-index: 1;   /* lower: behind */
  background-color: blue;
}

The slide's boxes had no size and the last rule had no closing brace. Here they have both.

Quick check

Which position?

Required 10 XP

Content that does not fit

When a box has a fixed size, its content can be too big. overflow decides what happens: visible (default: it sticks out), hidden (cut off), scroll (scroll bars) or auto (scroll bars only when needed). For one line that ends with "...", use three properties:

.text {
  width: 200px;
  white-space: nowrap;      /* stay on one line */
  overflow: hidden;         /* hide what does not fit */
  text-overflow: ellipsis;  /* show ... at the end */
}

Shadows

box-shadow takes up to five values: right, down, blur, spread and colour (inset puts it inside). A soft shadow uses a see-through black and a big blur:

.modern-card {
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

Your turn: a badge on a card

Guess first, then fix the card. Check the result on Phone and on Computer.

Practice

A badge on a card

Required 30 XP

The badge "New" should sit in the top right corner of the card, but it flies to the corner of the page, and the last rule is not closed (two problems from the slides). Close the rule, keep the badge in the card, add a soft shadow and show the note on one line that ends with "...".

Box model

Content, padding, border and margin, from the inside out.

Block element

Takes the whole line, like p or div.

Inline element

Takes only its own space inside a line, like a.

Positioned parent

The nearest box around an element with a position other than static.

z-index

Which box is in front: the higher number.

Overflow

Content that is too big for its box.

In short

• Width on screen = width + padding + border (both sides), unless you use box-sizing: border-box.
• Block elements take the whole line; inline elements stay inside it.
• Put position: relative on a box to place its absolute children inside it; fixed stays on the screen.
• overflow controls content that does not fit; box-shadow adds depth.

Sources

1. MDN Web Docs (2026). The box model (content, padding, border, margin; block and inline; box-sizing).
2. MDN Web Docs (2026). box-sizing.
3. MDN Web Docs (2026). display (block, inline, inline-block; tables have their own display type).
4. MDN Web Docs (2026). position (absolute: the nearest positioned ancestor; fixed; sticky).
5. MDN Web Docs (2026). z-index (positioned elements and flex and grid items).
6. MDN Web Docs (2026). overflow and text-overflow.
7. MDN Web Docs (2026). box-shadow.