Scribd
Upload
4 views21 pages

Css Box Model

The document outlines the fundamental concepts of CSS layout, focusing on the CSS box model, floating, and positioning. It explains the structure of the box model, including content, padding, border, and margins, and discusses the use of shorthand properties for margin and padding. Additionally, it highlights the utility of the 'auto' value for centering elements in CSS.

Uploaded by

aarushsingh3944
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
4 views21 pages

Css Box Model

The document outlines the fundamental concepts of CSS layout, focusing on the CSS box model, floating, and positioning. It explains the structure of the box model, including content, padding, border, and margins, and discusses the use of shorthand properties for margin and padding. Additionally, it highlights the utility of the 'auto' value for centering elements in CSS.

Uploaded by

aarushsingh3944
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 21

The Basis of CSS layout

The 3 core concepts to understand about CSS


layout are:
1. The CSS box model
2. Floating
3. Positioning

Together, these 3 concepts control the way


elements are arranged and displayed on a page.

SM5312 week 9: CSS Layout 1


The CSS Box Model
Every CSS box is divided into regions,
consisting of:
1. Content
2. Padding
3. Border
4. Margins

SM5312 week 9: CSS Layout 2


The CSS Box Model
Margin
Border
Padding

Content

SM5312 week 9: CSS Layout 3


The CSS Box Model
Margin
Border

Padding

Content With margin, border


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

SM5312 week 9: CSS Layout 4


Margins & Padding
Margins and Padding may seem similar at first
glance. But each has its own effect on content,
particularly on any backgrounds assigned to block
and div elements.
Margin

Padding

Content

SM5312 week 9: CSS Layout 5


CSS Shorthand: Margin & Padding
For margin and padding (and others), CSS provides a
number of shorthand properties that can save on writing
lines and lines of code. Instead of writing this:
0
#container {
12
margin-top: 0;
margin-right: 5px;
margin-bottom: 6px;
Content Area
margin-left: 5px; 5 5
12 10
padding-top: 20px;
padding-right: 10px;
30
padding-bottom: 30px;
padding-left: 12px; 6

}
SM5312 week 9: CSS Layout 6
CSS Shorthand: Margin & Padding
…Its much easier to write this:
#container {
padding: 20px 10px 30px 12px;
margin: 0px 5px 6px 5px; 0

} 20

The sequence order is always


clockwise, starting from the top Content Area
5 5
12 10

30

SM5312 week 9: CSS Layout 7


CSS Shorthand: Margin and Padding
You can also apply just one value, example:
#container {
padding: 20px; 5
20
margin: 5px;
}

Which will apply the value 5


Content Area
5
20 20
specified equally on all 4 sides

20
5

SM5312 week 9: CSS Layout 8


CSS Shorthand: Margin and Padding
And you can apply two values, example:
#container {
0
padding: 10px 20px;
10
margin: 0px 5px;
}

The first value is applied to 5


Content Area
5
20 20
the top and bottom

The second value is applied to 10


the left and right 0

SM5312 week 9: CSS Layout 9


CSS Shorthand: Margin and Padding: auto
A useful value to remember is ‘auto’:
#container {
0
padding: 10px 20px;
10
margin: 0px auto;
}

Usually applied to the left & auto Content Area


auto
20 20
right areas of the margin
property, auto is useful for
centering a block container 10
0
element in the browser window

SM5312 week 9: CSS Layout 10


2. CSS3 Borders
2. CSS3 Borders
2. CSS3 Borders
2. CSS3 Borders
2. CSS3 Borders
2. CSS3 Borders
2. CSS3 Borders
2. CSS3 Borders
2. CSS3 Borders
2. CSS3 Borders
2. CSS3 Borders

You might also like