To view an example regarding box model click here.
Calculating total width and height of an element As we all know that we can set width and height of the element using css width and height properties respectively. But we are actually setting only width and height of content area. Formulas for calculating total width and height of an element is as follows:
Total width of an element = left margin + left border + left padding + width + right padding + right border + right margin
Total height of an element = top margin + top border + top padding + height + bottom padding + bottom border + bottom margin
Total width of a div in above example = 12 pixels + 20 pixels +10 pixels + 120 pixels + 10 pixels + 20 pixels +12 pixels = 204 pixels
Total height of a div in above example = 12 pixels + 20 pixels +10 pixels + 60 pixels + 10 pixels + 20 pixels +12 pixels = 144 pixels
How to set margin of an element ? Element's margin can be set by using margin property.
div{margin:5px;}
Above css property declares that top margin, right margin, bottom margin and left margin of a div element should be 5 pixels.
div{margin:15px 5px;}
Above css property declares that top margin and bottom margin should be 15pixels.Left margin and right margin should be 5 pixels.
div{margin: 5px 10px 4px 8px;}
If above css property is applied to a div element then its top margin = 5 pixels right margin = 10 pixels bottom margin = 4 pixels left margin = 8 pixels
If you want you can set each margin separately. The above css property can be broken down into four css properties div{margin-top : 5px; margin-right : 10px; margin-bottom : 4px; margin-left : 8px;}
How to set padding of an element ? Element's padding can be set by using padding property.
div{padding:5px;}
Above css property declares that top padding, right padding, bottom padding and left padding of a div element should be 5 pixels.
div{padding: 5px 10px 4px 8px;}
If above css property is applied to a div element then its top padding = 5 pixels right padding = 10 pixels bottom padding = 4 pixels left padding = 8 pixels
If you want you can set each padding separately. The above css property can be broken down into four css properties div{padding-top : 5px; padding-right : 10px; padding-bottom : 4px; padding-left : 8px;}
CSS border properties Some of the properties are: border-style property is used to style border. Its values are solid, dotted, double, groove, ridge,inset, outset and dashed. To view different types of borders click here. border-width property is used to specify width of the border. border-color property is used to specify color of border. border is shorthand property where you can use all properties at the same time.
div{border : 3px dotted gray;}
div element using above property will have gray dotted border of three pixels width.
