Understanding Width Height Margin and Padding
Learn how width, height, margin, and padding define element dimensions and spacing.
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;
}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