2

こんにちは、HTML と CSS の初心者です。ロゴとタイトルの適切な配置を取得しようとしています。両方とも同じ行にある必要があります。問題は、h1 の内部スペースを削除できず、テキストの上に常に余白があることです (h1 の背景に色を付けると、テキストの上にさらに広がっていることがわかります)。これを解決する方法はありますか、それとも間違っていますか? 私はそれらの両方を正確に同じ高さと正確に同じ水平位置にしたい(タイトルの「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;
}
4

4 に答える 4

2

line-height を固定値に設定してみましたか?

h1 { line-height: 55px;}
于 2013-02-15T15:26:47.733 に答える
0

ssbrewsterが提案したように、負のマージンはオプションですが、レイアウトを台無しにしたくない場合は、次のことを試してみてくださいline-height。

header h1 {
    float: left;
    padding: 0px;
    margin: 0px;
    font-size: 55px;
    line-height: 70%;
}
于 2013-02-15T13:49:31.010 に答える
0

ヘッダー h1 に負の margin-top を追加してみてください:

header h1 {
  float: left;
  padding: 0px;
  margin: 0px;
  font-size: 55px;
  **margin-top: -15px;**
}
于 2013-02-15T13:45:42.053 に答える
0

私はあなたのためにjsfiddleを作成しました..これがあなたが達成しようとしているものであるかどうかを教えてください-

JSFiddle アラインメント - H1 と IMG

  header
 {
overflow:auto;
      }

header img
 {
float:left;
width:55px;
height:55px;
margin-right:20px;
margin-top:10px;/*add this */
}
于 2013-02-15T13:46:52.800 に答える