删除h1标签中的内部空间

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

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; 
}

来源

2013-02-15 Mattias Svensson

你可以用'线高度：55像素;''在头h1'来解决这个问题为背景而言的，但你必须手动调整字体大小，因为文字高度跨越不同的字体变化。 – Antony 2013-02-15 13:44:30

相关问题：http://stackoverflow.com/questions/5256211/negative-margins-vs-relative-positioning – br3w5 2013-02-15 13:54:38

对于'h1'，我们最好使用像''背景''的''img'。在这种情况下，你还要为'h1'添加'padding-left'。 – primetwig 2013-02-15 14:09:30

尝试增加阴性切缘顶到你的头段H1：

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

来源

2013-02-15 13:45:42 br3w5

我已经创建了一个对的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 */ 
}

来源

2013-02-15 13:46:52 Shail

这几乎解决了它。对齐方式正确，但文本框在图像末尾向下延伸。不管怎么说，还是要谢谢你！ – 2013-02-18 18:31:11

那是因为我已经设置文本框的高度相当于图像的大小......添加了一个新的文本示例.. check jsfiddle – Shail 2013-02-19 02:20:53

负利润率是一种选择，像ssbrewster建议，但如果你不想弄糟你的布局，你可以尝试line-height：

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

来源

2013-02-15 13:49:31 Aioros

你试过设置行高为固定值？

h1 { line-height: 55px;}

来源

2013-02-15 15:26:47 Raffael

删除h1标签中的内部空间

回答

相关问题