By default, block-level elements take up the full width of their surrounding elements.

Using the different display value, however, we can change that.

<html>
<head><style>.box {background-color: gray;width: 50px;height:25px;display: inline;}</style>
</head>
<body><div class="box"></div><div class="box"></div></body>
</html>
]]>

Nice! But what happened to the boxes?

Isn't that the default display value of block-level elements?