我有时发现自己处于基本上非常简单的HTML/CSS中存在一些我不理解的偏移量的情况。一些非常基本的HTML中令人难以置信的偏移量
这里有一个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元素的，而不是...
默认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>对于所有inline型display即是否是inline，inline-block，inline-flex之类的，DOM元素流如文本 -
注意，有一些隐含的内嵌元素之间的空间水平（随而变化）
垂直对齐默认为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>的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>
在''和'