一些非常基本的HTML中的无法解释的偏移[重复]

Question

这个问题在这里已有答案：

• Image inside div has extra space below the image 9个答案

我有时会发现自己处于基本非常简单的HTML / CSS中有一些偏移的情况，这是我无法理解的。

这是一个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>

额外的垂直偏移来自哪里？

到目前为止我发现的“唯一”解决方案是使用带有div而不是background-image元素的image ...

Answer 1

默认情况下，inline和inline-block元素根据其父级的baseline对齐。使用vertical-align更改此行为。

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

link应该有一个bottom垂直对齐，默认情况下它是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

对于所有inline类型displays无论是inline，inline-block，inline-flex等，DOM元素像文本一样流动 -

1. 请注意，内嵌元素之间存在一些隐式空格（随font-size而变化）
2. 垂直对齐默认为baseline - 请参阅下面演示中它与文本基线的对齐方式：

   .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>

解：

您可以使用vertical-align:middle垂直对齐内联元素。

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>