CSS box-model explained with examples.

Today I am gonna explain the box-model with the help of CSS background-clip and background-origin property. What are background-clip and background-origin properties? What they are used for and the difference between each of them?

Well, that’s a question that runs through the mind of beginner to intermediate level of web developers. Some of them are somewhat familiar with it and others are still wondering where they can use these 2 properties.

Well, before you can understand these 2 properties, you need to understand the CSS box-model. So, let’s begin with it.

First create a “div” and put a “p” tag inside of it like this,

<div> <p> some content in here… </p> </div>

and then give it some styles.

<style>
div{
 background: #666;
 width: 300px;
 height: 250px;
}
p{
 width: 200px;
 background: red;
}
</style>

As you can see that we haven’t given any padding or border to “div ”element so “div” element has no padding-box or border-box yet and whole box is considered content-box.

As shown in this image below.

You can check yourself by opening chrome developer tool

Now, give “div ”some padding of 50px from the top, bottom, left, right.

div{
 background: #666;
 width: 300px;
 height: 250px;
 padding: 50px;  // padding from top, bottom, left, right
}

Now, we have padding-box of 50px & content-box is inside padding-box as shown in this image below.

Now, we finally have padding-box of 50px

Now let’s remove width from “p” element so it expands to take the full width of content-box.

p{
 background: red;
}

You can see the result in image below.

‘P’ element expands to take the full width of content-box

Now, Let’s say you add a background image to “div” and set its background-size to “contain” to make it adjust its size inside the box and you also give it some border because without border there’s no border-box.

div{
 background: #666 url('https://bit.ly/2gzkSPX') no-repeat;
 background-size: contain;
 border: 10px solid black;
 width: 300px;
 height: 250px;
 padding: 50px;
}

Then it will look like this as shown in image below.

You can check it as well by going into chrome developer tool and hovering over box-model as shown in image

By default, div’s background-origin is set to padding-box and that means the image will start from border-box, and will also be visible in content-box because content-box is inside padding-box.

background-origin: padding-box;  /* default value */

Let’s say we want an image to start from padding-box but we only want to reveal the portion of the image that’s inside content-box then we need to set div’s background-clip to content-box.

div{
 background: #666 url('https://bit.ly/2gzkSPX') no-repeat;
 background-size: contain; 
 background-clip: content-box;
 border: 10px solid black;
 width: 300px;
 height: 250px;
 padding: 50px;
}

You can see the results in image below that only the portion of image that is inside content-box is visible but image is starting from the padding-box because that is the default value of “background-orgin”.

As you can see that only the portion of the image is visible that’s inside content-box and rest is hidden

Now, let’s also reveal the portion of the background image that comes inside padding-box, for that we need to set div’s background-clip back to padding-box which was the default value before we changed it.

div{
 background: #666 url('https://bit.ly/2gzkSPX') no-repeat;
 background-size: contain; 
 background-clip: padding-box;
 border: 10px solid black;
 width: 300px;
 height: 250px;
 padding: 50px;
}

You can see in the results below that now the portion of image that comes inside padding-box is also visible because we have set background-clip back to padding-box.

Now we can also see the portion of the image that’s inside padding-box

Now, Let’s make sure our div’s background image starts from border-box and for that we need to give our “div ” a background-origin of border-box. But first, let’s increase the size of the border to notice the difference.

div{
 background: #666 url('https://bit.ly/2gzkSPX') no-repeat;
 background-size: contain; 
 background-origin: border-box; 
 background-clip: padding-box;
 border: 20px solid black;  /* Border width is 20px now */
 width: 300px;
 height: 250px;
 padding: 50px;
}

As you can see in the image below that because background image is now starting from border-box that’s why a small portion of image is covered by black border, in other words portion of the image is behind the black border.

Now the image is starting from border-box

Now to prove my point that the image is starting from border-box and that’s why a small portion of the image is behind the black border, let’s give border some opacity so that it can fade out and we can see the portion of the image that is behind the border.

div{
 background: #666 url('https://bit.ly/2gzkSPX') no-repeat;
 background-size: contain; 
 background-origin: border-box; 
 background-clip: padding-box;
 border: 20px solid rgba(0,0,0,0.5);  /* using rgba() */
 width: 300px;
 height: 250px;
 padding: 50px;
}

Here you can see the image behind fading border

Here you go, you can now see the portion of image that is behind the border and that also proves my point that now the image is starting from the border-box because we set background-origin to border-box.

Now that you know the difference between background-origin & background-clip and you also know about CSS box-model, Its time for you to go and build some amazing stuff with it. #Goodluck 😎

If you missed my previous article about web accessibility then here’s the link to it, Don’t forget to read it. CLICK HERE