Rullst AcademyRullst Academy/Lesson
CSS and interface design · Lesson 04 / 12

Every element occupies a box

Two crowded blocks may need space. Internal and external space are different.

Learning paths14 min

Let's discover together

  1. 1

    The box model includes content, padding, border and margin. Padding separates content from the border; margin separates the box from others. Gap separates Flexbox or Grid items without adding outer space at the container edges.

  2. 2

    With content-box, width: 200px describes content only. Padding of 20px per side and borders of 2px per side produce a 244px border-box width before margins.

  3. 3

    With border-box, the same 200px includes padding and border; content is 156px in this example. The project uses border-box as a baseline, but the measurement box lets you compare both modes explicitly.

  4. 4

    Change box-sizing on .measure and compare observed width. Vertical margins of normal-flow blocks may collapse; do not assume all margins simply add up. For cards in a grid, gap makes spacing more predictable.

Workshop: one interface, different spaces

Edit <style id="lesson-css"> in “My files and GitHub”. The preview applies that CSS to the supplied HTML structure; check HTML edits in the downloaded file. External resources and CSS outside the study subset are not accepted here.

Go to my code

Measurements describe this preview; they do not guarantee every size or complete accessibility. Test long content, zoom, keyboard and assistive technologies in the local project.

Two-color contrast lab

Approximate ratio ·

Calculation only for two opaque sRGB colors selected here; it does not read your page. The threshold uses the unrounded ratio. It does not assess transparency, gradients, images, states or complete conformance.

Official links and next step

✦
YOUR MISSION

Calculate a simple box and distinguish padding, border, margin and gap.

Now it's your turn

Discovery workshop

Predict, change, compare

width:200px; padding:20px; border:2px solid; box-sizing:content-box; no margins.
Build your answers and check when you are ready.
A moment to understand

Which space separates text from the card border?

I need a hint

Check the rule, condition and observed result before concluding.

Loading your journey…

Take it with you

Fix cramped card text with padding and crowded cards with gap. Explain why the fixes differ.

At your own pace

My files and GitHub

Every lesson can become your own record: code, notes or a practice plan. Saving a file to GitHub is optional and does not change your XP.

Student guide

The editor and downloads open when this lesson is available to your account. Check access below or return to the track map.

Checking your access to this lesson…

Rullstpetbot

AI can make mistakes. Check the lesson material.