blob: 5d29e604faad5180c848daff687ff27a32a97ac2 [file] [log] [blame]
<!DOCTYPE html>
<!--
| The following constraints must hold among the used values of the other
| properties:
| margin-left + border-left-width + padding-left
| + width
| + padding-right + border-right-width + margin-right
| = width of containing block
|
| If there is exactly one value specified as "auto", its used value follows
| from the equality.
| https://www.w3.org/TR/CSS21/visudet.html#blockwidth
-->
<html>
<head>
<style>
.containing-block {
background-color: #2196f3;
padding: 10px 0;
margin-bottom: 10px;
width: 500px;
}
.block {
/* TODO: Add borders when supported. */
background-color: #3f51b5;
display: block;
height: 5px;
padding: 0 100px;
}
.auto-margin-left {
margin-left: auto;
margin-right: 50px;
width: 100px;
}
.auto-margin-right {
margin-left: 50px;
margin-right: auto;
width: 100px;
}
.auto-width {
margin-left: 50px;
margin-right: 50px;
width: auto;
}
</style>
</head>
<body>
<div class="containing-block">
<div class="auto-margin-left block"></div>
</div>
<div class="containing-block">
<div class="auto-margin-right block"></div>
</div>
<div class="containing-block">
<div class="auto-width block"></div>
</div>
</body>
</html>