blob: 9e9e459722797ceeaf4e05e6daa04f145b1074ea [file] [log] [blame]
<!DOCTYPE html>
<!--
| Margin of a child box, although invisible, should not overflow a line box.
| The opposite is also true, if a child box has a content box that overflows
| a line box but has a negative margin to compensate the overflow, such child
| box should be considered as not exceeding the width of the line box.
-->
<html>
<head>
<style>
body {
margin: 0px;
font-family: Roboto;
font-size: 30px;
font-weight: bold;
}
.slightly-short {
width: 150px;
}
.normal {
width: 200px;
}
.containing-block {
background-color: #03a9f4;
margin-bottom: 10px;
}
.first {
background-color: #1de9b6;
}
.second {
background-color: #00bfa5;
}
.inline-block {
display: inline-block;
height: 40px;
width: 100px;
}
.with-negative-margin {
margin-right: -50px;
}
.with-positive-margin {
margin-right: 50px;
}
</style>
</head>
<body>
<div class="normal containing-block">
<div class="first inline-block"></div
><div class="second inline-block"></div>
</div>
<div class="normal containing-block">
<div class="first inline-block"></div
><div class="second inline-block with-positive-margin"></div>
</div>
<div class="slightly-short containing-block">
<div class="first inline-block"></div
><div class="second inline-block"></div>
</div>
<div class="slightly-short containing-block">
<div class="first inline-block"></div
><div class="second inline-block with-negative-margin"></div>
</div>
</body>
</html>