Current Goal: Making Websites

CSS Box Model

What it is

The CSS box model is the system for understanding how to space out individual items in a CSS layout.

Why it matters

Learning how to position and space individual items with the CSS box model is the prerequisite for making CSS layouts.

What you'll learn

The CSS display property, margins, padding, and borders.

How to learn it

Once again, the Interneting is Hard box model tutorial is fantastic.

As you work through these lessons, keep chipping away at the Free Code Camp CSS curriculum simultaneously.

We’ll go deeper into some of these topics, such as talking about negative margins, when we tackle CSS layout.

Comprehension

  • What is the CSS box model?
  • Why not just make your static webpage one giant image and not deal with CSS?
  • Whats the difference between display: inline and display: block?
  • Which elements default to block and which default to inline, out of div, p, h1, img, span, li, and em?
  • What are the four properties of a box in the CSS box model, from innermost to outermost?
  • What is the shorthand syntax for modifying the vertical and horizontal padding of an element?
  • What are the top, bottom, left and right padding applied by this CSS rule? p { padding: 10px 20px 30px 40px; } Which is which?
  • What is the syntax to apply a 2 pixel solid blue border around a div?
  • How do you apply a border to only one side of an element?
  • When should you choose margins instead of padding and vice versa? What’s the difference?
  • How do inline elements handle margins? Why in hell does it work like this?
  • What is the (confusingly named) inline-block display value? How is it different than inline and block?
  • What is margin collapsing?
  • What HTML elements are considered container elements, meaning that they don’t effect the semantic structure of the document?
  • What is the box-sizing property? Whats the difference between border-box and content-box? Which is usually better?
  • How come text-align: center sometimes doesn’t center your element? Stupid CSS...

    • How do you vertically center an inline element? A block element?
  • What is the browser’s default stylesheet?
  • What is a CSS reset?

Tasks

Again, make sure you actually follow along and do the tutorial instead of just reading if you want to get the most out of it.

Eliminate the collapsing margin in the example here.

What's Next?

This site relies on your feedback! These lessons are free. Please take this 2 minute survey when you finish each lesson so I can make them better.

Current Goal: Making WebsitesNext Lesson: CSS Selectors