Cheat Sheet: The Box Model

The Box Model Layers

The Four Layers of the CSS Box Model
Layer Related CSS properties Description
Content <width> / <height> The actual content of the element (text, image, etc.).
Padding <padding> Creates space between the content and the border.
Border <border> Wraps the padding and content; visible outline of the box.
Margin <margin> Creates space outside the element, separating it from others.
The Box Model in CSS
The Box Model in CSS (taken on GCF Global)

The Box Model: Core CSS Properties

Common CSS properties Used to Control the Box Model
Property Possible Values and/or Examples Effect on the Box Model
box-sizing content-box / border-box Defines whether padding and border are included in width and height.
display block / inline / inline-block Defines how the element flows and how its box behaves.
overflow auto / hidden / scroll / visible Controls what happens when content exceeds the box.
border border: solid 1px green (the order of the values does not matter.) Adds a visible boundary around the padding and content.
border-radius border-radius: 25px / border-radius: 10% Rounds the corners of the box, affecting the border and background.
width / height width: 500px / height: auto Defines the size of the content box (or entire box with border-box).
max-width / max-height max-width: 100% / max-height: 800px Limits how large an element can grow, useful for responsive layouts.
margin margin-left 30px / margin: auto 50% Creates space outside the element’s border, affecting layout and spacing.
padding padding-bottom: 5% / padding: 20px 15px Creates space between the content and the border, increasing the box size.
margin shorthand / padding shorthand padding: 15px 20px 30px 55px / margin: 20px 15px 28px / margin: 200px 250px / padding:55px Sets top, right, bottom, and left margins or padding in a single declaration.