CSS box-model explained with example.

Today am gonna explain box-model with the help of CSS background-clip and background-origin property, What is background-clip and background-origin? What are the uses of both of these and what’s 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 other are still wondering where they can actually use these 2 properties.

Well before you can understand these 2 properties, you need to understand CSS box-model. Lets begin with it.

If you create a div and put p into it like this.

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

and 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, If We give div some padding of 50px from top,bottom,left,right.

div{
background: #666;
width: 300px;
height: 250px;
padding: 50px;
}

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 lets 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’ elements expands to take the full width of content-box

Now, Lets say you add a background image to div and set its background-size to contain to make it adjust its size inside box, Also give it some border cause 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 too 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 image will start from border-box and will also be visible in content-box cause content-box is inside padding-box.

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

Let’s say we want image to start from padding-box but we only want to reveal the portion of 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;
}

And you can see the results in image below.

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

Now, lets also reveal the portion of background image that comes inside padding-box, For that set div’s background-clip to padding-box which was the default value before.

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 the results below.

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

Now, Lets make sure our div’s background image starts from border-box & for that we need to give our div a background-origin of border-box. But first let’s increase the size of 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; /* Its 20px now */
width: 300px;
height: 250px;
padding: 50px;
}

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

Now image is starting from border-box

Now to prove my point that image is starting from border-box and that’s why small portion of image is covered with black border. Let’s give border some opacity so that it can fadeout and we can see the image behind that 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! I hope everything makes sense now. Now that you know what’s the difference between background-origin & background-clip + you also know about CSS box-model now, Its time for you to go get build some amazing stuffs with it. :)

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