Remove inner space in h1 tag

问题

Hi im a beginner in HTML and CSS! Im trying to get the proper alignment of a logo and a title . Both of them should be on the same line. The problem is that i cant remove the inner space of the h1 and there is always a margin on top of the text (if i color the bg for the h1, i see that it extends further above the text). Is there a way to solve this or am i doing it wrong? I want both of them to be exactly the same height and in the exact same horizontal position (the top of the "T" in title should be at the top of the img and the same for bottom).

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

回答1:

Have you tried setting the line-height to a fixed value?

h1 { line-height: 55px;}

回答2:

Try adding a negative margin-top to your header h1:

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

回答3:

The negative margin is an option, like ssbrewster suggested, but if you don't want to mess up your layout you could try line-height:

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

回答4:

I have created a jsfiddle for you .. let me know if this is wat you are trying to achieve -

JSFiddle ALignment - H1 and IMG

  header
 {
overflow:auto;
      }

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

来源：https://stackoverflow.com/questions/14895962/remove-inner-space-in-h1-tag

标签

html

css

alignment

inline