Skip to main content
HTML5ANDCSS3 logoHTML5ANDCSS3Tools and Tutorials

CSS Box Model

5 lessonsAbout 30 minutesBeginner

This part of the CSS Tutorial runs from CSS Margin through to CSS Width and Height. There are 5 lessons here, and working through them takes about 30 minutes at a steady pace.

It follows on from CSS Text & Fonts, so finish that first if you have not already — the examples below assume you are comfortable with it.

Each lesson below says what it covers before you open it. Read them in order the first time; afterwards this page works as a index you can jump back into when you need to check one thing.

  1. 1CSS MarginControl space outside an element's border, use logical margins, understand vertical margin collapsing, and center constrained blocks safely.
  2. 2CSS PaddingControl space between content and borders with shorthand, logical properties, percentages, and box-sizing-aware dimensions.
  3. 3CSS BorderBuild borders with width, style, color, radius, logical sides, and shorthands while accounting for their effect on box dimensions.
  4. 4CSS OutlineDraw non-layout outlines for focus and emphasis, control their offset, and preserve accessible keyboard focus indicators.
  5. 5CSS Width and HeightSet physical and logical dimensions while using min/max constraints, percentages, intrinsic content, and box sizing to prevent overflow.
All of CSS TutorialNext: CSS Layout