Size of a square inside another square


I’m looking at this demo with one square inside another. And I don’t realise what is giving the size to the outer square, the grey one.

Here’s the link:

And why in my example, the outer square (grey) is bigger if it’s the same code as in the other example:

Thanks in advance.

.box {
background: #2db34a;
height: 95px;
line-height: 95px;
text-align: center;
width: 95px;

Sorry, the outher square, the grey one.

I was just about to post the same answer as megazoid so he’s obviously quicker than me:)

Indeed the inner green box is sized by the .box rules as shown above and the outer gray box’s dimensions are auto and shrink to fit because the outer is floated (i.e. its size depends on its content).

These examples use different Codepen settings

First one has Settings > CSS > CSS base set to “reset” while second has it set to “neither”.

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.