The document discusses the CSS box model which describes the layout of elements including content, padding, border, and margin. It also covers CSS properties for styling dimensions, borders, margins, padding, and outlines of elements. Examples are provided for calculating the total width and height of elements based on these different CSS properties.

1. CSS
Box Model
by Niciuzza, nicha.in.th

2. Margin
Border
Padding
CSS Box Model
CSS for Web Designer by Niciuzza, nicha.in.th
Content
Margin - The empty area around the
border. The margin is completely
transparent, no background color.
Border - A border that goes around the
padding and content. The border is
affected by the background color of
the box
Padding - Clears an area around the
content. The padding is affected by the
background color of the box
Content - The content of the box,
where text and images appear

3. CSS Border
CSS for Web Designer by Niciuzza, nicha.in.th
● border-width
● border-style (required)
● border-color
border:5px solid red;
Short hand
border-width: 5px;
border-style: solid;
border-color: red;
General
Ref: http://www.w3schools.com/css/css_border.asp

4. CSS Margin
CSS for Web Designer by Niciuzza, nicha.in.th
● margin-top
● margin-bottom
● margin-right
● margin-left
margin-top:100px;
margin-bottom:20px;
margin-right:50px;
margin-left:30px;
General
Ref: http://www.w3schools.com/css/css_margin.asp

5. CSS Margin
CSS for Web Designer by Niciuzza, nicha.in.th
margin: 25px 50px 75px 100px;
top margin is 25px
right margin is 50px
bottom margin is 75px
left margin is 100px
Ref: http://www.w3schools.com/css/css_margin.asp
margin: 25px 50px;
top and bottom margins are 25px
right and left margins are 50px
margin: 25px 50px 75px;
top margin is 25px
right and left margins are 50px
bottom margin is 75px
margin: 25px;
all four margins are 25px
Short hand

6. CSS Padding
CSS for Web Designer by Niciuzza, nicha.in.th
● padding-top
● padding-bottom
● padding-right
● padding-left
padding-top:100px;
padding-bottom:20px;
padding-right:50px;
padding-left:30px;
General
Ref: http://www.w3schools.com/css/css_padding.asp

7. CSS Padding
CSS for Web Designer by Niciuzza, nicha.in.th
padding: 25px 50px 75px 100px;
top padding is 25px
right padding is 50px
bottom padding is 75px
left padding is 100px
Ref: http://www.w3schools.com/css/css_padding.asp
padding: 25px 50px;
top and bottom padding are 25px
right and left padding are 50px
padding: 25px 50px 75px;
top padding is 25px
right and left padding are 50px
bottom padding is 75px
padding: 25px;
all four padding are 25px
Short hand

8. CSS Dimension
CSS for Web Designer by Niciuzza, nicha.in.th
● width
● min-width
● max-width
width: 50%;
min-width: 250px;
max-width: 800px;
Example
Ref: http://www.w3schools.com/css/css_dimension.asp
● height
● min-height
● max-height

9. CSS Outline
CSS for Web Designer by Niciuzza, nicha.in.th
An outline is a line that is drawn around elements (outside the borders)
to make the element "stand out".
● outline-color
● outline-style
● outline-width
outline:red dotted 1px;
Short hand
outline-color: red;
outline-style: dotted;
outline-width: 1px;
General
Ref: http://www.w3schools.com/css/css_outline.asp

10. Margin
Border
Padding
Calculate Width & Height
CSS for Web Designer by Niciuzza, nicha.in.th
Content
width:250px;
padding:10px;
border:5px solid
gray;
margin:10px;
Calculate the Width:
250px (width)
+ 20px (left + right padding)
+ 10px (left + right border)
+ 20px (left + right margin)
= 300px;
style.css

11. Excercise 1
CSS for Web Designer by Niciuzza, nicha.in.th
width:300px;
height: 100px;
border: 10px 2px 3px;
Calculate the Width:
300px (width)+ 4px (left+right border)
= 304px;
style.css
Calculate the Height:
100px (height)+ 10px (top border)
+ 3px (bottom border)
= 313px;

12. Excercise 2
CSS for Web Designer by Niciuzza, nicha.in.th
width:900px;
height: 35px;
border: 0px 1px 1px 10px;
padding: 20px;
Calculate the Width:
900px (width)+ 11px (left+right border)
+ 40px (left+right padding)
= 951px;
style.css
Calculate the Height:
35px (height)+ 1px (top+bottom border)
+ 40px (top+bottom padding)
= 76px;

13. Excercise 3
CSS for Web Designer by Niciuzza, nicha.in.th
width:960px;
height: 180px;
margin-right: 20px;
padding: 5px;
padding-left: 20px;
Calculate the Width:
960px (width)+ 20px (right margin)
+ 25px (left+right padding)
= 1005px;
style.css
Calculate the Height:
180px (height)+ 10px (top+bottom padding)
= 190px;

14. Excercise 4
CSS for Web Designer by Niciuzza, nicha.in.th
width:440px;
height: 270px;
margin: 10px;
padding: 12px;
border: 3px 4px 0px 1px;
Calculate the Width:
440px (width)+ 20px (left+right margin)
+ 24px (left+right padding)+5px (left+right border)
= 489px;
style.css
Calculate the Height:
270px (height)+ 20px (top+bottom margin)
+ 24px (top+bottom padding)+3px (top+bottom
border)
= 317px;

15. References
CSS for Web Designer by Niciuzza, nicha.in.th
● http://www.w3schools.com/css/