<!DOCTYPE html>
<!--
 | In an inline formatting context, boxes are laid out horizontally, one after
 | the other, beginning at the top of a containing block. Horizontal margins,
 | borders, and padding are respected between these boxes.
 |   https://www.w3.org/TR/CSS21/visuren.html#inline-formatting
 -->
<html>
<head>
  <style>
    body {
      font-size: 100px;
    }
    .hello {
      border: 10px solid green;
      margin: 10px;
      padding: 10px;
    }
    .world {
      border: 20px solid blue;
      margin: 20px;
      padding: 20px;
    }
  </style>
</head>
<body>
  <span class="hello">Hello,</span><span class="world">world!</span>
</body>
</html>