html - 删除 h1 标签中的内部空间

Question

嗨，我是 HTML 和 CSS 的初学者！我试图让徽标和标题正确对齐。他们两个应该在同一条线上。问题是我无法删除 h1 的内部空间，并且文本顶部总是有一个边距（如果我为 h1 着色 bg，我看到它在文本上方延伸得更远）。有没有办法解决这个问题还是我做错了？我希望它们的高度和水平位置完全相同（标题中“T”的顶部应该在 img 的顶部，底部相同）。

HTML：

<header>
    <img src="images/logo.gif" alt="logo">
    <h1>Title</h1>
</header>

CSS：

header
{
    overflow:auto;
}

header img
{
    float:left;
    width:55px;
    height:55px;
    margin-right:20px;
}

header h1
{
    float:left;
    padding:0px;
    margin:0px;
    font-size:55px;
}

Answer 1

您是否尝试将行高设置为固定值？

h1 { line-height: 55px;}

Answer 2

我为您创建了一个 jsfiddle .. 让我知道这是否是您想要实现的目标 -

JSFiddle 对齐 - H1 和 IMG

  header
 {
overflow:auto;
      }

header img
 {
float:left;
width:55px;
height:55px;
margin-right:20px;
margin-top:10px;/*add this */
}

Answer 3

尝试在标题 h1 中添加负边距顶部：

header h1 {
  float: left;
  padding: 0px;
  margin: 0px;
  font-size: 55px;
  **margin-top: -15px;**
}

Answer 4

负边距是一个选项，就像 ssbrewster 建议的那样，但如果你不想弄乱你的布局，你可以尝试line-height：

header h1 {
    float: left;
    padding: 0px;
    margin: 0px;
    font-size: 55px;
    line-height: 70%;
}