From the course: Cutting-Edge CSS
Join today to access over 24,000 courses taught by industry experts.
Why margins collapse - CSS Tutorial
From the course: Cutting-Edge CSS
Why margins collapse
(upbeat music) - Work with CSS for a few hours, and you'll invariably stumble into one of the most misunderstood features of CSS, collapsing margins. Here's an example. You have two containers, one after the other. You set margin block end on the first container to something like two REM, and then you think, Hmm, I need a bit more space between these two. So I'll set margin blocks, start on the second one to one REM and nothing happens. The space between the two items is still two REM. Even though you technically have three REMS of margin. To increase the space between the two items, you have to increase either margin block end of the first item or margin block start on the second item to more than two REM, otherwise one cancels out the other and the space remains two REM. This is collapsing margins. And even though it may look like a bug in CSS, it actually makes sense. The key is to think about the origin…
Download courses and learn on the go
Watch courses on your mobile device without an internet connection. Download courses using your iOS or Android LinkedIn Learning app.