CSS Fundamentals Selectors CSS Box Model Layout CSS Flexbox Layout CSS Grid Layout System CSS Typography Text Styling CSS Colors Backgrounds CSS Positioning Methods CSS Animations Transitions CSS Responsive Design CSS Custom Properties Variables CSS Transforms 3D Effects CSS Filters Effects CSS Pseudo Elements Content CSS Scroll Behavior Snap CSS Shapes Clip Path CSS Modern Layout Techniques CSS Accessibility Focus States CSS Dark Mode Theming CSS Performance Optimization CSS Utility Classes System

Back to Lessons

CSS Box Model Layout

April 5, 2026

Box Model and Dimensions

Every HTML element is a rectangular box.

Box Model Diagram

Content (width x height)
+ Padding (content spacing)
+ Border (visual edge)
+ Margin (outside spacing)
= Total element width

Box Sizing

* {
  box-sizing: border-box;
}

.content {
  width: 300px;
  padding: 20px;
  border: 5px solid;
  margin: 10px;
}

Key Properties

width/height/max-width/min-height
margin: 10px auto (center block)
padding: 20px 10px (vertical horizontal)
border-radius: 10px (rounded corners)

Previous Lesson Next Lesson