blob: 0e5aefae4ddf689eb946e9ffeab1e9668e398805 [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 "width" is set to "auto", any other "auto" values become "0" and "width"
| follows from the resulting 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;
width: auto;
}
.auto-margin-left {
margin-left: auto;
}
.non-auto-margin-left {
margin-left: 50px;
}
.auto-margin-right {
margin-right: auto;
}
.non-auto-margin-right {
margin-right: 50px;
}
</style>
</head>
<body>
<div class="containing-block">
<div class="auto-margin-left non-auto-margin-right block"></div>
</div>
<div class="containing-block">
<div class="non-auto-margin-left auto-margin-right block"></div>
</div>
<div class="containing-block">
<div class="auto-margin-left auto-margin-right block"></div>
</div>
</body>
</html>