inline-block-baseline.html

Enable keyboard shortcuts

<!DOCTYPE html>

<html><head>

<style>

.inline-block { display: inline-block; }

.test {

  background-color: lightgrey;

  overflow: hidden;

.border { border: solid blue;  border-width: 1px 3px 5px 7px; }

.padding { padding: 10px; }

.margin { margin: 1px 3px 5px 7px; }

</style>

</head><body>

The boxes should align vertically:

<div class="inline-block">

  <div>

      <div class="test border padding margin overflow"></div>

  </div>

</div>

<div class="test inline-block margin border padding overflow"></div>

<br>

The boxes should align vertically:

<div class="inline-block">

  <div>

      <div class="test border padding margin overflow">X</div>

  </div>

</div>

<div class="test inline-block margin border padding overflow">X</div>

</body></html>