css box model

the css box model consists of margins, borders, padding, and the actual content.

the margin, border, padding can be broken down into top, right,bottom,left segments.

the perimeter of each of the four areas(content,padding,border,margin)is called an 'edge',so each box has four edges.

diagram below show the box model.

Css Box model

explain box model.

  • content -indicate the content of the box.
  • padding -property set the space between the element border and the element content. it affected by background color of an element.
  • border -a  border set around the padding and content.
  • margin -clears an area around the border.margin backgrounds are always transparent.

width and height of an element.

width -property is used to set the width of a box.

height -property is used to set the height of a box.

when you want to calculate full size of an element, you must add the paddings, margins, borders.

calculate total width and height of an element.(see example)

        <style type="text/css"}
        p { width:300px;
        	   border:1px solid pink;

total element width:-

  width + left padding + right padding + left border + right border + left margin + right margin.

total element height:-

  height + top padding + bottom padding + top border + bottom border + top margin + bottom margin.