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/
