Why the margin is -15 to leave no distance from the box around it?

Just curious, why the margin should be -15px to enlarge the inside box to fill the entire box around it? Why is it not zero (meaning “no margin” I guess?)? And how to know the number is -15 not -20 or -30 etc…?


I don’t understand your question.

Do you have an example?


In this section it says: “An element’s margin controls the amount of space between an element’s border and surrounding elements.”
So I suppose set the margin to zero means no space between the border and surrounding?

But actually the margin should be -15px, “so it fills the entire horizontal width of the yellow box around it.”

I didn’t get how we get the number -15px.

I don’t know whether I clarified my question clearly. I am total beginner. This might be a silly question.

Thanks for your time!

No problem, there are no silly questions here :slight_smile:

In this specific case, yellow box is the container of blue box. Blue box’s default values have certain margins which increases distance between its borders and borders of its containers. Therefore bluebox appears smaller in this case. A solution to this kind of problems is giving margin 0 to bluebox. However, notice yellow box has paddings as well so this complicates a little bit. So considering paddings and margins together, margin with negative value was applied here.

That makes sense.