Inexplicable offsets in some very basic HTML

Question

I sometimes find myself in the situation that there are some offsets in basically very simple HTML/CSS which I don't comprehend.

Here's one example:

<div style="width: 100%; height: 92px;">
  <image src="https://www.google.at/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png" width="272px" height="92px"></image>
  <a href="www.google.com">Google</a>
</div>

Where does the additional vertical offset come from?

The "only" solution I found so far was to use a div with a background-image instead of the image element...

Answer 1

By default inline and inline-block elements are aligned according to baseline of their parent. Use vertical-align to change this behavior.

a,
img {
  vertical-align: middle;
}

<div style="width: 100%; height: 92px;">
  <img src="https://www.google.at/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png" width="272px" height="92px">
  <a href="www.google.com">Google</a>
</div>

Answer 2

The link should have a bottom vertical align, by default it is baseline

a {
  vertical-align: middle;
}

img{
  vertical-align: bottom;
  }

<div style="width: 100%; height: 92px;">
  <img src="https://www.google.at/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png" width="272px" height="92px">
  <a href="www.google.com">Google</a>
</div>

Answer 3

For all inline type displays whether it is inline, inline-block, inline-flex and the like, DOM elements flow like text -

1. Note that there is some implicit space between the inline elements horizontally (that varies with font-size)

2. The vertical-alignment defaults to baseline - see how it aligns to the baseline of the text in the demo below:

   .wrapper {
     border: 1px solid;
   }
   .wrapper > * {
     display: inline-flex;
     border: 1px solid;
     height: 100px;
     width: 100px;
   }

   <div class="wrapper">
     <div></div>
     <div>
       <h1>kjk</h1>
     </div>
   </div>

Solution:

You can use vertical-align:middle to align the inline elements vertically.

div > * {
  vertical-align: middle;
}

<div style="width: 100%; height: 92px;">
  <image src="https://www.google.at/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png" width="272px" height="92px"></image>
  <a href="www.google.com">Google</a>
</div>