CSS Tutorial - CSS Box Model








CSS box model is a way of style HTML element. Each HTML element is a rectangle box with border, margin, padding and content.

The following code shows the layout of the each parts in an element. The outer most is margin, then the element border, after that is the padding, the content is the core and inner most.

  • Margin - a transparent area outside the border.
  • Border - a border is around the padding and content.
  • Padding - a transparent area around the content.
  • Content - the actual text and images.
null

The total width of an element should be calculated like this: 

Total element width = 
    width + 
    left padding + 
    right padding + 
    left border + 
    right border + 
    left margin + 
    right margin;

The total height of an element should be calculated like this: 

Total element height = 
    height + 
    top padding + 
    bottom padding + 
    top border + 
    bottom border + 
    top margin + 
    bottom margin;

The following code sets the width of a div element to be 250px. The padding is 25px.

div {
    width: 250px;
    padding: 25px;
    border: 25px solid navy;
    margin: 25px;
}