Css box model

2,190 views

Published on

Published in: Education, Technology
2 Comments
1 Like
Statistics
Notes
No Downloads
Views
Total views
2,190
On SlideShare
0
From Embeds
0
Number of Embeds
16
Actions
Shares
0
Downloads
67
Comments
2
Likes
1
Embeds 0
No embeds

No notes for slide

Css box model

  1. 1. CSS Box Model by Niciuzza, nicha.in.th
  2. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 15. References CSS for Web Designer by Niciuzza, nicha.in.th ● http://www.w3schools.com/css/

×