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

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

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

Answer 3

我为你创造了一个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 */
}

Answer 4

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

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

删除h1标记中的内部空间

4 个答案: