CSSBox Model

by Niciuzza, nicha.in.th

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

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

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

CSS Margin

CSS for Web Designer by Niciuzza, nicha.in.th

margin: 25px 50px 75px 100px;top margin is 25pxright margin is 50pxbottom margin is 75pxleft margin is 100px

Ref: http://www.w3schools.com/css/css_margin.asp

margin: 25px 50px;top and bottom margins are 25pxright and left margins are 50px

margin: 25px 50px 75px;top margin is 25pxright and left margins are 50pxbottom margin is 75px

margin: 25px;all four margins are 25px

Short hand

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

CSS Padding

CSS for Web Designer by Niciuzza, nicha.in.th

padding: 25px 50px 75px 100px;top padding is 25pxright padding is 50pxbottom padding is 75pxleft padding is 100px

Ref: http://www.w3schools.com/css/css_padding.asp

padding: 25px 50px;top and bottom padding are 25pxright and left padding are 50px

padding: 25px 50px 75px;top padding is 25pxright and left padding are 50pxbottom padding is 75px

padding: 25px;all four padding are 25px

Short hand

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

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

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

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;

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;

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;

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;

References

CSS for Web Designer by Niciuzza, nicha.in.th

● http://www.w3schools.com/css/