Learn HTML Box Model by Building a Rothko Painting - Step 21

[Janani1312]

Hi,

I don’t understand why the dimensions for the outer “frame” box is 700802. Shouldn’t it be 702802 after giving a padding of 1px for the inner div with class “canvas”?
Could someone please explain why this is happening?

This is the code so far:
HTML:

Rothko Painting

CSS:

.canvas {
width: 500px;
height: 600px;
background-color: #4d0f00;
padding: 1px;
}

.frame {
border: 50px solid black;
width: 500px;
padding: 50px;
margin: 20px auto;
}

.one {
width: 425px;
height: 150px;
background-color: #efb762;
margin: 20px auto;
}

[zaklina]

The reason for this is that the padding of the inner div is contained within the outer div’s dimensions. Therefore, the dimensions of the outer div should only increase by the difference between the width of the inner div and the width of the outer div.

[Janani1312]

Hi,
I still don’t understand it. Could you please elaborate?

[zaklina]

Padding is the space between the content of the box and its border. It is added to the total width and height of the box, so if you have a padding of 1px, it will add 2px to each of the dimensions (1px on each side for width and 1px on each side for height).