0

I still dont understand margins well, even after years

sometimes they work, sometimes they dont. Are there any simple rules?

for example I had this:

enter image description here

this is a block element inside of a bootstrap .container

as you can see, the top margin works, the bottom margin doesnt.

If I switch the display: block; of that all rights reserved element to display: inline-block; it starts working.

enter image description here

why is that?

Toskan
  • 13,911
  • 14
  • 95
  • 185
  • TL;DR : margin collpasing doesn't happen with inline-block, only with block – Temani Afif Nov 01 '19 at 22:28
  • Everything is detailed here if you have time to read it: https://www.w3.org/TR/CSS2/box.html#collapsing-margins .. you will probably need to read it more than once to understand all the cases – Temani Afif Nov 01 '19 at 22:32
  • @TemaniAfif the document you linked is really unreadable to me. Can you add a short summary as answer maybe? as the "duplicate" questions link to that unreadable document as well with no easy answer – Toskan Nov 01 '19 at 23:16
  • I added two duplicates dealing with the same issue and you don't have to read that document. It's the official specification with all the accurate detail and I know it's not trivial to read it but now you know what you are facing and you have a name for it (margin collapsing) and this is your answer. Now simply google that word and you will find a lot of articles with figures that will illustrate and explain it using easy words. There is also more question in SO talking about if you follow the two duplicate I added – Temani Afif Nov 01 '19 at 23:20

0 Answers0