Question

这是我的HTML代码

<html>
<head>
</head>
<link href="https://fonts.googleapis.com/css?family=Roboto:300i,400" rel="stylesheet">
<style>
    body {
        font-family: 'Roboto', sans-serif;
        font-size: 1.2em;
    }

    #head {
        height: 50px;;
        width: 100%;
        background-color: #000000;
        color: #ffff00;;
    }
</style>
<body>
<div id="head">
    logout
    <img src="/static/img/logout.png"/>
    logout
</div>
</body>
</html>

在添加图像之前，顶部边框的高度为0

添加图像后，顶部边框有空格

为什么会发生这种情况，如何使后添加图像文本没有空间到顶部边框。我已经使用了边距和填充但没有用。

Answer 1

您需要垂直对齐图像

在你的情况下

#head img {vertical-align:top;}

body {
  font-family: 'Roboto', sans-serif;
  font-size: 1.2em;
}
#head {
  height: 50px;
  width: 100%;
  background-color: #000000;
  color: #ffff00;
  font-size: 12px;
}
#head img {
  vertical-align: top;
}

<div id="head">
  logout
  <img src="https://placeholdit.imgix.net/~text?txtsize=28&txt=300%C3%97300&w=300&h=300" width=30/>logout
</div>

Answer 2

默认情况下，图像的对齐方式是底部，这会导致您现在面临的情况。所以你可以根据你的要求设置vertical-align。在您的情况下，它应该是vertical-align: top。这可以通过向图像添加css或向图像标记添加属性align="top"来完成。

添加CSS

  #head > img
    {
        vertical-align: top;
    }

OR

添加属性

<img src="/static/img/logout.png" align="top"/>

Answer 3

我添加了align =＆＃34; top＆＃34;到图像，然后图像接近顶部边框。但请注意图像与底部边框之间的距离或下面的其他内容在这种情况下会变得更大，这使得布局看起来也不好看。感谢

文本到顶部边框空间在添加图像时表现不同

3 个答案: