CSS Box Model

CSS CODES & EXAMPLES

CSS Box Model

Understand how content, padding, border and margin work together to control the size, spacing and layout of every HTML element.

← CSS Width & Height Start Learning →

What is the CSS Box Model?

The foundation of spacing and element dimensions

Every HTML element is treated as a rectangular box by CSS. The CSS Box Model consists of four main areas: Content, Padding, Border and Margin.

Content

The actual text, image or other content inside the element.

Padding

Space between the content and the border.

Border

The visible line surrounding the padding and content.

Margin

Space outside the border that separates elements.

Box Model Structure

Visual representation

MARGIN

BORDER

PADDING

CONTENT

Content

The innermost part of the box

content.css

.box {
  width: 300px;
  height: 150px;
}

CONTENT AREA

Padding

Space inside the element

Padding creates space between the content and the border. It increases the space inside an element.

padding.css

.box {
  padding: 30px;
}

CONTENT

Padding on Individual Sides

Control top, right, bottom and left spacing

padding-sides.css

.box {
  padding-top: 20px;
  padding-right: 30px;
  padding-bottom: 20px;
  padding-left: 30px;
}

TOP

RIGHT

BOTTOM

LEFT

CONTENT

Border

Draw a boundary around an element

border.css

.box {
  border: 3px solid #1769d5;
}

BORDER

Border Properties

Control width, style and color separately

Border Radius

Create rounded corners

border-radius.css

.box {
  border-radius: 20px;
}

5px

15px

30px

50%

Margin

Space outside an element

Margin creates space outside the border and separates an element from surrounding elements.

margin.css

.box {
  margin: 30px;
}

MARGIN

ELEMENT

margin: auto

Center a block element horizontally

margin-auto.css

.box {
  width: 300px;
  margin: 0 auto;
}

CENTERED ELEMENT

Margin on Individual Sides

Set spacing separately

margin-sides.css

.box {
  margin-top: 20px;
  margin-right: 30px;
  margin-bottom: 20px;
  margin-left: 30px;
}

ELEMENT

Margin & Padding Shorthand

Write multiple sides in a shorter form

shorthand.css

/* 1 value */
.box {
  padding: 20px;
}

/* 2 values */
.box {
  padding: 20px 30px;
}

/* 3 values */
.box {
  padding: 10px 20px 30px;
}

/* 4 values */
.box {
  padding: 10px 20px 30px 40px;
}

1 Value All sides

2 Values Top/Bottom • Left/Right

3 Values Top • Left/Right • Bottom

4 Values Top • Right • Bottom • Left

box-sizing

Control how width and height are calculated

box-sizing.css

* {
  box-sizing: border-box;
}

.box {
  width: 300px;
  padding: 30px;
  border: 5px solid #1769d5;
}

content-box Default box model

border-box Width includes padding + border

Total Box Size

Understand the mathematical calculation

Element Width Content + Left Padding + Right Padding + Left Border + Right Border

Element Height Content + Top Padding + Bottom Padding + Top Border + Bottom Border

calculation.css

.box {
  width: 300px;
  padding: 20px;
  border: 5px solid black;
}

/*
Total width with content-box:

300 + 20 + 20 + 5 + 5
= 350px
*/

Practical Course Card

Box Model in a real website component

Computer Fundamentals

Learn computer basics, hardware, software, memory, operating systems and applications.

View Course →

Web Designing

Learn HTML, CSS, responsive layouts and practical website development.

View Course →

Tally Prime

Learn accounting, GST, inventory and practical business applications.

View Course →

Quick Reference

Important Box Model properties

Property	Example	Purpose
width	`width: 300px;`	Set content width
height	`height: 200px;`	Set content height
padding	`padding: 20px;`	Space inside the box
border	`border: 1px solid;`	Boundary around the box
margin	`margin: 20px;`	Space outside the box
border-radius	`border-radius: 10px;`	Rounded corners
box-sizing	`border-box`	Includes padding and border in declared size