我有時發現自己處於基本上非常簡單的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>
在''和'