Each box has a content area and optional surrounding padding, border, and margin areas. The size of each area is specified by properties. The margin, border, and padding can be broken down into top, right, bottom, and left segments. The perimeter of each boxes is called an “edge”, so each box has four edges.

There are four boxes (see box model):
Content box:
this area is given by the width and height of the box, which often depend on the element’s rendered content.
Padding box:
this area surrounds the content box. If the padding has 0 width, the padding edge is the same as the content edge.
Border box:
this area surrounds the padding box. If the border has 0 width, the border edge is the same as the padding edge.
Margin box:
this area surrounds the border box. If the margin has 0 width, the margin edge is the same as the border edge.

The background style of the content, padding, and border areas of a box is specified by the ‘background‘ property of the generating element. Margin backgrounds are always transparent.

The background of body is painted inside the margin box when there is no background styling of html.

Try These

Watch This


Check This

<div id="aqua">aqua</div> <div id="yellow">yellow</div> <div id="pink">pink</div>

Edit This

Use shift + enter to create new lines (even in Safari and Chrome).