Alignment, Sizes, Borders and Spacing

6 min reading
6 min activity

0 of 4 tasks doneup to 75 XP

Remember: readable colours10 XPOptional
Space inside and outside20 XPTo do
Short forms of margin and padding15 XPTo do
Profile card30 XPTo do

Your boxes need room. Today you align text, set sizes, draw borders and add space. You also learn how to hide something.

In this lesson

Align text and centre a box on the page.
Set width and height with suitable units and limits.
Add borders and round corners.
Add space with margin, padding and gap.
Hide an element.

Remember

Readable colours come first, also in boxes and borders.

Quick check

Remember: readable colours

10 XP

A quick question from lesson 3.2. It is optional.

Aligning text

text-align places text inside its box: left, right, center or justify. Centred text suits headings and short lines; right-aligned text suits prices and dates.

Two corrections to the slide

The default follows the direction of the language (left for English), not always left. And justified text makes uneven gaps between words, which is harder to read on screens for some people. Use it rarely.

Centring a box

Worked example

Limit the width
The slide uses width: 500px, which sticks out of a phone screen. max-width keeps the limit on a computer and lets the box shrink on a phone.

Share the free space

auto margins share the free space on both sides equally.

.box {
  max-width: 500px;    /* at most 500px wide */
  margin-left: auto;   /* free space on the left */
  margin-right: auto;  /* and the same on the right */
  /* short form: margin: 0 auto; */
}

More ways to centre (you learn them later)

Flexbox and grid can centre in both directions: display: flex; justify-content: center; align-items: center; or display: grid; place-items: center; (lesson 3.7). A box with position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); sits in the centre of its nearest positioned parent, not of the whole page (lesson 3.6).

Sizes and units

width and height set the size of a box; max-width, min-width, max-height and min-height set limits. A useful rule for every website: img { max-width: 100%; } (a picture is never wider than its box).

Unit	Example	Meaning
`px`	`200px`	A fixed size.
`%`	`50%`	A part of the parent box.
`rem`	`1.5rem`	Based on the reader's text size. Good for text.
`vw`, `vh`	`100vw`	A part of the window width or height.

Borders

A border has a width, a style (solid, dashed, dotted, double, none) and a colour, in one line or in three.

/* in one line */
.box {
  border: 2px solid #043E74;
}
/* in three lines */
.box-detailed {
  border-width: 2px;
  border-style: solid;
  border-color: #043E74;
}
/* one side only */
.special-box {
  border-top: 3px solid #B53D1D;
}
/* round corners and a circle */
.round-box {
  border-radius: 12px;
}
.circle {
  border-radius: 50%;
}

Space inside and outside

padding is the space inside the border. margin is the space outside it, between this box and its neighbours. gap is the space between the items of a flex or grid box (lesson 3.7).

Practice

Space inside and outside

Required 20 XP

Move the sliders and watch the card. Reach all three goals at the same time.

With one value, all four sides get the same space. With two values: top and bottom, then left and right. With four values, go clockwise: top, right, bottom, left.

.box-a { margin: 20px; }               /* all four sides */
.box-b { margin: 10px 20px; }          /* top and bottom 10px, left and right 20px */
.box-c { margin: 5px 10px 15px 20px; } /* top, right, bottom, left */
.box-d { margin-top: 15px; }           /* the top only */

One rule, one margin

One slide writes all four margin lines in the same rule. Then only the last line works: a later declaration replaces an earlier one. So we show four separate boxes.

Matching

Short forms of margin and padding

Required 15 XP

Tap a declaration, then tap what it means.

Padding and a border make a box wider than its width. * { box-sizing: border-box; } keeps them inside the width (lesson 3.6).

Hiding things

CSS	What happens
`display: none;`	The element is gone and takes no space.
`visibility: hidden;`	The element is invisible but keeps its space.
`opacity: 0;`	Invisible, keeps its space, and can still be clicked.
`pointer-events: none;`	Visible, but mouse clicks do nothing. The keyboard can still use it.

To show it again, give back the display value it had, for example display: block. To switch off a form control, use the disabled attribute.

Your turn: a profile card

Guess first, then press Run. Switch the preview between Phone and Computer.

Practice

Profile card

Required 30 XP

Ayla is a fictional learner. Style her profile card: at most 320px wide and centred, 16px padding, a 2px border, round corners and centred text. The picture must never be wider than the card, and it gets round corners too.

Padding: Space inside the border, around the content.
Margin: Space outside the border.
Border: The line around the padding: width, style, colour.
max-width: The largest width a box can have. It can be smaller.
box-sizing: With border-box, padding and border stay inside the width.

In short

text-align places text; max-width + margin: 0 auto centres a box.
Use max-width instead of a fixed width, so boxes and pictures fit on a phone.
Padding is inside the border, margin outside; values go clockwise.
display: none removes an element; visibility: hidden keeps its space.

Next time

Selectors: you point your CSS at exactly the right elements, and you learn which rule wins.

Sources

MDN Web Docs (2026). text-align (start follows the direction of the language; justify).
MDN Web Docs (2026). margin (one, two and four values; auto to centre).
MDN Web Docs (2026). padding.
MDN Web Docs (2026). max-width.
MDN Web Docs (2026). CSS values and units (px, %, rem, vw, vh).
MDN Web Docs (2026). border and border-radius.
MDN Web Docs (2026). gap.
MDN Web Docs (2026). box-sizing.
MDN Web Docs (2026). display, visibility and pointer-events (keyboard focus still works).
W3C WAI (2026). Understanding Success Criterion 1.4.8: Visual Presentation (text not justified).

End of the lesson

This lesson: 0 of 85 XP

Code Cards in this lesson: 10

text-align
width
px % rem vw
border
border-radius
margin
padding
gap
box-sizing
display

Next: Selectors and Priority