一些非常基本的HTML中无法解释的偏移量

Question

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

这里有一个example：

＆＃13;

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

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

＆＃34; only＆＃34;到目前为止我发现的解决方案是使用div而background-image而不是image元素...

Answer 1

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

＆＃13;

＆＃13;

a,
img {
  vertical-align: middle;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

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类型display，无论是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>