Slide 29 - Box Model or Block Model § Session 03

Box Model or Block Model

margin
border
padding
content

Box Model Illustration from CSS: The Definitive Guide by Eric Meyer

A more detailed look:

block-start, block-end, inline-start, inline-end
For LRTB writing, these correspond to top, bottom, left, and right.
Box Model Illustration from CSS: The Definitive Guide by Eric Meyer

Think about the block axis (direction of multiple lines) and the inline axis (direction of line) Box Model Illustration from CSS: The Definitive Guide by Eric Meyer

Image from CSS: The Definitive Guide, 5th ed by Eric Meyer and Estelle Weyl, published by O'Reilly