Last active
May 12, 2017 09:37
-
-
Save AlexanderShushunov/45d339d9b6a7296a85c67fd921d445ad to your computer and use it in GitHub Desktop.
Several examples of margin collapsing. See: https://habrahabr.ru/post/257327/ https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Box_Model/Mastering_margin_collapsingRaw
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!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