I’ve been playing around with this a little, but I can’t seem to crack what’s happening with the margin between the red box and the blue box. Right now, I’m setting the margin for red box to 30px and the one for the blue box to 10px. But the margin between the blue box and the red box seems to be somewhere between 10px and 30px. Why is this?
(I have researched a little on the topic of margin collapsing, but it doesn’t quite make sense for this situation? Cause wouldn’t the margin in question be 10px instead? )
Also, I just realized, is it correct that for the red and blue boxes in the example, they the are surrounded not only by their own margin but also the padding set by the parent element (the yellow box) ?
Hello, the yellow box allows a play area for the elements it contains its height x its width minus the padding if I may say. In this playground the red and blue boxes can define margins which will reduce their size. for the common margins the largest crushes the smallest.
Thanks for helping out. Well, after measuring the dimensions off my screen for a while, I’m pretty aware of the “larger margin over smaller margin” phenomenon. But I’m still a little confused why the yellow area below the blue box is still less then then the area between the blue and red box. As for now, I’m suspecting that the area below the blue area consisted of not only the blue box’s margin but also the adding by the yellow box.