The Basis of CSS layout The CSS Box Model

The 3 core concepts to understand about CSS Every CSS box is divided into regions,
layout are: consisting of:
1. The CSS box model 1. Content
2. Floating 2. Padding
3. Positioning 3. Border
4. Margins
Together, these 3 concepts control the way
elements are arranged and displayed on a page.

1 2

The CSS Box Model The CSS Box Model

Margin Margin
Border Border
Padding

Padding

Content Content With margin, border

and padding
properties, each of
the 4 sides can be
specified
independently

3 4

1
Margins & Padding CSS Shorthand: Margin & Padding
Margins and Padding may seem similar at first For margin and padding (and others), CSS provides a
number of shorthand properties that can save on writing
glance. But each has its own effect on content,
lines and lines of code. Instead of writing this:
particularly on any backgrounds assigned to block
0
and div elements. #container {
12
margin-top: 0;
Margin margin-right: 5px;
margin-bottom: 6px; Content Area
Padding margin-left: 5px; 5 5
12 10
padding-top: 20px;
padding-right: 10px;
30
padding-bottom: 30px;
6
Content padding-left: 12px;
}
5 6

CSS Shorthand: Margin & Padding CSS Shorthand: Margin and Padding
…Its much easier to write this: You can also apply just one value, example:
#container { #container {
padding: 20px 10px 30px 12px; 5
padding: 20px;
margin: 0px 5px 6px 5px; 0 20
20 margin: 5px;
}
}
The sequence order is always Content Area
clockwise, starting from the top Content Area Which will apply the value 5
20 20
5

5
12 10
5 specified equally on all 4 sides
20
30
5
6

7 8

2
CSS Shorthand: Margin and Padding CSS Shorthand: Margin and Padding: auto
And you can apply two values, example: A useful value to remember is ‘auto’:
#container { #container {
0 0
padding: 10px 20px; 10
padding: 10px 20px; 10
margin: 0px 5px; margin: 0px auto;
} }
Content Area Content Area
The first value is applied to 5
20 20
5 Usually applied to the left & auto
20 20
auto

the top and bottom right areas of the margin

property, auto is useful for
The second value is applied to 10
centering a block container
10
0 0
the left and right element in the browser window

9 10

2. CSS3 Borders 2. CSS3 Borders

3
2. CSS3 Borders 2. CSS3 Borders

2. CSS3 Borders 2. CSS3 Borders

4
2. CSS3 Borders 2. CSS3 Borders

2. CSS3 Borders 2. CSS3 Borders

5
2. CSS3 Borders