Margin error, upper margin goes at the top of the lower margin

Question

So let's say I had several <div>s, each of which had margin-topa margin-bottom. I would expect these elements to be arranged one after another: Top Margin -> Div -> Bottom Marginfor each of them. However, the upper margin “goes along the bottom edge” (violin). Thus, the distance between each element is just that margin-top.

I found a way to fix this with float:left;, but I should not use this property, nor absolute positioning.

PS: If you don’t see the problem in the violin, use something like a Chrome console.

Answer 1

, , . .