DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’»

Cover image for Quick CSS Quiz #1
Abdelrahman Ismail
Abdelrahman Ismail

Posted on • Updated on

Quick CSS Quiz #1

CSS might be a total mystery to you or a topic that’s near and dear to your heart. Whether you think of CSS as a "necessary evil" or think of it as the power to control the world of technology, CSS is a must-have for anyone working on web applications. A deep knowledge of CSS can be the difference between a beautiful, polished web application and one that just feels like "meh".

In this series, I try to focus on CSS weird parts, throw quiz and its answer, hoping to give a better understanding of how CSS works in depth.

Problem:

Having the following code snippet, for two adjacent siblings divs, #div1 has a margin of 50px, #div2 has a margin of 20px.
what is the distance between those two div?

<div id="div1" style="margin: 50px;">A</div>
<div id="div2" style="margin: 20px;">B</div>
Enter fullscreen mode Exit fullscreen mode

Options:

  • 20px
  • 30px
  • 50px
  • 70px

The answer:

you can find the answer below, but please give yourself a couple of minutes to think about it, to make sure you benefit from this quiz.






πŸ‘‡πŸ‘‡πŸ‘‡





The correct answer is: "50px" πŸŽ‰πŸŽ‰
If you wonder why this is the correct answer, please read the discussions below.

Cover image original artwork by: Sergi Delgado

Top comments (5)

Collapse
 
ismail9k profile image
Abdelrahman Ismail Author

First of all, because the div is a block-level element it will take the full width of the container, so the distance between the two divs is the vertical distance.
Due to "margin collapsing", the top and bottom margins are collapsed into a single margin whose size is the largest of the individual margins, which is 50px.

Collapse
 
ygalanter profile image
ygalanter

Adjacent margins overlap, not combine, hence 50.

Collapse
 
ismail9k profile image
Abdelrahman Ismail Author

πŸ˜„πŸ‘πŸ‘πŸŽ‰πŸŽ‰

Collapse
 
maxart2501 profile image
Massimo Artizzu

Hey folks, remember that margin collapsing happens only vertically, or better on the block axis.

Also, it doesn't apply to flex or grid items.

Collapse
 
ismail9k profile image
Abdelrahman Ismail Author

Thank you for sharing this πŸ€—πŸ€—

🌚 Browsing with dark mode makes you a better developer by a factor of exactly 40.

It's a scientific fact.