blob: 298894782a57e30573388bf49456f3e0bee85280 [file] [log] [blame]
<!DOCTYPE html>
<!--
| If both "margin-left" and "margin-right" are "auto", their used values
| are equal. This horizontally centers the element with respect to the edges
| of the containing block.
| 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;
margin: 0 auto;
padding: 0 100px;
width: 100px;
}
</style>
</head>
<body>
<div class="containing-block">
<div class="block"></div>
</div>
</body>
</html>