CSS margin collapsing – what it is and why should I care

📖 Neural networks for Javascript developers

The Neural Networks for JavaScript developers book is almost ready! Learn the basics of AI with TensorFlowJs examples. Join now the presale and get a 15$ coupon off the launching price!

In CSS margin-collapsing refers to the fact that the margins that are next to each other are colliding… but only vertically.

Yeah, it's one of those brainfuck moments in CSS.

Let's first take two divs that are one next to each other on the horizontal axis. If we have a margin: 25px for both divs, and the width: 100px then, as expected, the required width will be 300px.

However, if we try to do the same with the divs are arranged vertically then the total needed space will be 275px, instead of the expected 300px.

And this is because the vertical margins of the elements are collapsing.

But, what if the margins are of different sizes? What if one div has margin: 25px and the other has a margin: 40px? Well, in this case just the largest of the two margins will be applied (40px in our case).

And what about negative margins? The rule will be applied when both margins are negative (vertically), but not when one margin is negative and the other is positive.

If you want to learn more take you can a look at:

📖 Neural networks for Javascript developers

The Neural Networks for JavaScript developers book is almost ready! Learn the basics of AI with TensorFlowJs examples. Join now the presale and get a 15$ coupon off the launching price!


Leave a Reply

Your email address will not be published. Required fields are marked *

Home Screencasts Best of Newsletter Search X

Neural Networks for JavaScript developers
Presale - 15$ free coupon

Hi friend! Before you go, just wanted to let you know that in March 2023 I will be launching the TensorFlow.Js by Example course.

This course will include basic concepts of AI and Neural Networks done with TensorFlowJs such as:

  • Working with datasets
  • Visualizing training
  • Deep Neural Networks in JavaScript
  • Reinforcement Learning
  • Convolutional neural networks
  • and much more ...

Also, there will be a lot of examples as:

  • Object detection
  • Natural language processing
  • Face and voice recognition
  • Gaming AI

Join now the waiting list and get a 15$ coupon off the launching price!

X