删除 h1 标签中的内部空间答案

【问题标题】：Remove inner space in h1 tag删除 h1 标签中的内部空间
【发布时间】：2016-08-18 03:22:44
【问题描述】：

您好，我是 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;
}

【问题讨论】：

相关问题：stackoverflow.com/questions/5256211/…
你最好使用你的img 就像background 一样h1。在这种情况下，您还将为h1 添加padding-left。
我建议你使用 css reset 来解决这样的问题 - meyerweb.com/eric/tools/css/reset
感谢您的回复。行高：55px； + 一些字体大小调整完美解决了它。还将更多地研究 css 重置，对未来的工作非常有趣。

标签： html css alignment inline

【解决方案1】：

您是否尝试将 line-height 设置为固定值？

h1 { line-height: 55px;}

【讨论】：

【解决方案2】：

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

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

【讨论】：

【解决方案3】：

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

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

【讨论】：

【解决方案4】：

我已经为你创建了一个 jsfiddle .. 如果这是你想要实现的目标，请告诉我 -

JSFiddle ALignment - H1 and IMG

  header
 {
overflow:auto;
      }

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

【讨论】：

这几乎解决了它。对齐是正确的，但文本框向下延伸到图像的末尾。还是谢谢！
那是因为我将文本框的高度设置为与图像大小相等...添加了一个带有文本的新示例..检查 jsfiddle