CSS Box Model

The CSS Box model is like a container. It is used to create layout of webpages. It contains border, margin, padding and content in itself. It is helpful to layout different elements. Every element is rendered as a rectangular box by web browsers. This is all because of box model. Box model contains different properties which are following.

• Content

  Through the help of this property we can show content like images, text etc. That can be sized through width and height property.

• Padding

  This property is used to create space around an element inside given border or area.

• Margin

  This property is used to create space outside of element means it creates space around the border.

• Border

  This property is used to cover any element.With the help of border we can style, color and width of the border.

We can understand the box model thorugh the help of this figure.

• Content Area

  This area have content like text, images and other media stuff and dimensions of this area are given by content box width and height.

• Padding Area

  This area contains the padding of the content.This area is space around the content box within the border.

• Border Area

  This area is the area between the box's padding and margin.It creates the difference between the area of padding and margin.

• Margin Area

  This area is useful to separate the element from its neightbour elements.The dimensions of this area are margin width and margin height.