Skip to content

Instantly share code, notes, and snippets.

@AlexanderShushunov

AlexanderShushunov/margin-collapsing.html

Last active May 12, 2017 09:37
Show Gist options
  • Save AlexanderShushunov/45d339d9b6a7296a85c67fd921d445ad to your computer and use it in GitHub Desktop.
Save AlexanderShushunov/45d339d9b6a7296a85c67fd921d445ad to your computer and use it in GitHub Desktop.
Download ZIP
Raw
margin-collapsing.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.block {
height: 20px;
border: 1px solid;
}
.container {
border: 1px dotted red;
margin: 10px;
}
</style>
</head>
<body>
See: <a href="https://habrahabr.ru/post/257327/">Победа над неочевидным. Схлопывание внешних отступов</a>,
<a href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Box_Model/Mastering_margin_collapsing">Mastering margin collapsing</a>
<div class="container">
Collapsing
<div class="block" style="margin-bottom: 20px"></div>
<div class="block" style="margin-top: 20px"></div>
</div>
<div class="container">
Not collapsing (inline-block). Space under bottom div is a descender (e.g for letter g).
<div class="block" style="margin-bottom: 20px; display: inline-block; width: 100%"></div>
<div class="block" style="margin-top: 20px; display: inline-block; width: 100%"></div>
</div>
<div class="container" style="overflow-y: auto">
Not collapsing (float)
<div class="block" style="margin-bottom: 20px; float: left; width: 99%;"></div>
<div class="block" style="margin-top: 20px; float: left; clear: left; width: 99%;"></div>
</div>
<div class="container">
Collapsing (parent and first/last child). Parent does not have a border and a padding.
<div style="margin-top: 40px; background: lightcyan">
<div class="block" style="margin-top: 40px"></div>
</div>
</div>
<div class="container">
Not collapsing (parent and first/last child). Parent has a border.
<div style="margin-top: 40px; border: dotted 1px gray; background: lightcyan">
<div class="block" style="margin-top: 40px"></div>
</div>
</div>
<div class="container">
Not collapsing (parent and first/last child). Parent has a padding.
<div style="margin-top: 40px; padding: 1px; background: lightcyan">
<div class="block" style="margin-top: 40px"></div>
</div>
</div>
<div class="container">
Collapsing (empty block).
<div class="block" style="margin-bottom: 20px"></div>
<div class="empty" style="margin-top: 20px; margin-bottom: 20px"></div>
<div class="block" style="margin-top: 20px"></div>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment