<svg width="50" height="50">
  <rect width="50" height="50" style="fill:rgb(255,0,0);stroke-width:1;stroke:rgb(0,0,0)" />
</svg>
<span></span>

<!-- Source: https://developer.mozilla.org/en-US/docs/Web/CSS/vertical-align -->
<div>An <img src="https://mdn.mozillademos.org/files/12245/frame_image.svg" alt="link" width="32" height="32" /> image with a default alignment. (baseline)</div>
<div>An <img class="top" src="https://mdn.mozillademos.org/files/12245/frame_image.svg" alt="link" width="32" height="32" /> image with a text-top alignment.</div>
<div>An <img class="bottom" src="https://mdn.mozillademos.org/files/12245/frame_image.svg" alt="link" width="32" height="32" /> image with a text-bottom alignment.</div>
<div>An <img class="middle" src="https://mdn.mozillademos.org/files/12245/frame_image.svg" alt="link" width="32" height="32" /> image with a middle alignment.</div>
* {
  margin: 0;
  padding: 0;
}

span {
  display: block;
  width: 50px;
  height: 50px;
  background-color: red;
  border: 1px solid black;
}

img.top { vertical-align: text-top; }
img.bottom { vertical-align: text-bottom; }
img.middle { vertical-align: middle; }
Rerun