一些非常基本的HTML中的莫名其妙的偏移量 | 一些非常基本的HTML中的莫名其妙的偏移量

本文介绍了一些非常基本的HTML中的莫名其妙的偏移量的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我有时会发现自己的情况是，基本上很简单的HTML/CSS中存在一些我不理解的偏移量.

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

这是一个示例:

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

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

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

推荐答案

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

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>

这篇关于一些非常基本的HTML中的莫名其妙的偏移量的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！