Understanding Width Height Margin and Padding
Learn how width, height, margin, and padding define element dimensions and spacing.
Understanding Width Height Margin and Padding is a free CSS Academy lesson on CoddyKit — lesson 1 of 4. You can read the complete lesson below for free — then practise it hands-on in the browser with a built-in code editor and a 24/7 AI tutor. It is part of the CSS Academy learning path, one of 4 lessons in the course, and your progress syncs across the web and the CoddyKit app.
The Box Model Concept
Every HTML element is rendered as a rectangular box. The CSS box model describes the four layers that make up this box from inside out: content → padding → border → margin.
width and height
width and height set the dimensions of the content area. By default, padding and border are added on top of this size.
.box {
width: 200px;
height: 100px;
}padding
padding is transparent space inside the border, between the content and the border edge. It is part of the element's clickable/background-painted area.
.card {
padding: 16px; /* all sides */
padding: 8px 16px; /* top+bottom | left+right */
padding: 4px 8px 12px; /* top | left+right | bottom */
padding: 4px 8px 12px 16px; /* top right bottom left */
}Padding Longhands
Each side can be set individually:
.element {
padding-top: 8px;
padding-right: 16px;
padding-bottom: 8px;
padding-left: 16px;
}margin
margin is transparent space outside the border. It pushes other elements away. Negative margins pull elements closer or overlap them.
.section {
margin: 0 auto; /* center block element horizontally */
margin-bottom: 24px;
}Margin Collapse
Vertical margins collapse between adjacent block elements: the actual gap is the larger of the two margins, not their sum. Horizontal margins never collapse.
/* Top margin 20px, bottom margin 30px → gap is 30px not 50px */
h2 { margin-bottom: 20px; }
p { margin-top: 30px; }Preventing Margin Collapse
Margin collapse is prevented when:
- Elements are flex or grid children
- A parent has
overflow: hidden - A parent has
paddingbetween parent and first child - An inline element separates the siblings
auto Margins
Setting horizontal margins to auto on a block element with a fixed width centers it within its container. This is the classic centering technique.
.centered {
width: 800px;
max-width: 100%;
margin: 0 auto;
}min-width max-width min-height max-height
Constrain dimensions with minimum and maximum bounds to keep elements readable across screen sizes:
.content {
min-height: 100px;
max-width: 65ch; /* readable line length */
width: 100%;
}Calculating Total Element Size
In the default content-box model, total width = width + padding-left + padding-right + border-left + border-right. This can be surprising and is why border-box is preferred.
Logical Margin and Padding Properties
Modern CSS offers logical equivalents: margin-block, margin-inline, padding-block-start, etc. These adapt to writing direction automatically.
.card {
padding-block: 16px;
padding-inline: 24px;
}Quick Check
Which layers are included in a block element's total rendered width in the default box model?
Recap
The box model layers are content, padding, border, and margin. Padding is inside the border; margin is outside. Vertical margins collapse between adjacent siblings. Use margin: 0 auto with a fixed width to center block elements.
Frequently asked questions
Is the “Understanding Width Height Margin and Padding” lesson free?
Yes — the full text of “Understanding Width Height Margin and Padding” is free to read here on the web, and the CSS Academy course includes 4 lessons in total. To practise it interactively (a built-in code editor and a 24/7 AI tutor) and unlock the rest of the CSS Academy course, upgrade to CoddyKit PRO.
What will I learn in “Understanding Width Height Margin and Padding”?
Learn how width, height, margin, and padding define element dimensions and spacing. You practise CSS Academy with hands-on code you run directly in the browser, and a 24/7 AI tutor answers your questions as you work through the lesson.
Do I need any experience to start CSS Academy?
No prior experience is required. CSS Academy on CoddyKit is structured for beginners through advanced learners; this is — lesson 1 of 4, so you can start here or from the beginning and move at your own pace.
How long does the “Understanding Width Height Margin and Padding” lesson take?
Most CoddyKit lessons take about 5–10 minutes. Each one is bite-sized and interactive, so you make steady progress and pick up exactly where you left off across the web and the app.
Can I write and run code in this CSS Academy lesson?
Yes. Every CSS Academy lesson includes a built-in code editor, so you write and run real code right in your browser and get instant AI feedback — no local setup required.
All lessons in this course
- Understanding Width Height Margin and Padding
- Border Styles Width and Color
- Box-Sizing: Content-Box vs Border-Box
- Outline and Box-Shadow