The CSS Box Model

In CSS, the term "box model" means considering all the HTML elements as boxes. It can be supposed as base of page layout. The CSS box model is essentially a box that wraps around HTML elements, and it consists of: margins, borders, padding, and the actual content.

The image below illustrates the box model:

Following two CSS3 Properties can be related to box model.

1. background-clip
2. background-origin

1. Background-Clip

It specifies the painting area of the background.

Consider following three CSS IDs:

#div1
{
padding:15px;
border:5px dotted #000000;
background-color:yellow;
width:150px;
height:150px;    
background-clip:content-box;
}

#div2
{
padding:15px;
border:5px dotted #000000;
background-color:yellow;
width:150px;
height:150px;    
background-clip:padding-box;
}
#div3
{
padding:15px;
border:5px dotted #000000;
background-color:yellow;
width:150px;
height:150px;    
background-clip:border-box;
}

Output:

There are three separate values that can be assigned to background-clip. These are:

2. Background-Origin

The background-origin property specifies what the background-position property should be relative to. Similar to background-clip property, background-origin also have three values.