HTML5ヘッダー要素に余分なスペースがある

HTML5 <header>要素をCSSでフォーマットするときに問題が発生します。私が何をしているかにかかわらず、ヘッダーは、それに含まれている<img>要素よりも高さの次元で複数のピクセルを常にレンダリングします。HTML5ヘッダー要素に余分なスペースがある

画像はすべて同じ高さです。私のCSSでは、パディングとマージンを0に設定し、イメージやヘッダーに余白やパディングを割り当てないCSS Resetがあります。 SafariブラウザでMacでページをレンダリングし、AndroidスマートフォンでChromeで画像をレンダリングすると、画像がすべてヘッダー内の文書の上部に揃うようにヘッダーがレンダリングされますが、ヘッダーは常にコンテンツの下にいくつかpadding-bottomとほぼ同じような値が設定されています。

マイHTML：

<!DOCTYPE HTML> 
<html> 
<head> 
    <title>Responsive Template</title> 
    <link rel="stylesheet" type="text/css" href="style.css"> 
</head> 
<body> 
    <header> 
    <img id="logo" src="images/csi_logo.svg" alt="csi logo"> 
    <img id="focus" src="images/home_icon.svg" alt="focus"> 
    <img id="hamburger" src="images/hamburger_icon.svg" alt="hamburger"> 
    </header> 
</body> 
</html>

マイCSS：

* { 
    margin: 0; 
    padding: 0; 
    font-size: 5vh; 
} 
header { 
    background-color: #444444; 
} 
#logo { 
    height: 10vh; 
} 
#focus { 
    height: 10vh; 
} 
#hamburger { 
    height: 10vh; 
    float: right; 
}

出典

2016-12-04 Ingo

それはbaselineに整列するため<img />タグの性質のです。与える：

vertical-align: middle; 
display: inline-block;

すべての画像はあります。

* { 
 
    margin: 0; 
 
    padding: 0; 
 
    font-size: 5vh; 
 
} 
 
header { 
 
    background-color: #444444; 
 
} 
 
#logo { 
 
    height: 10vh; 
 
} 
 
#focus { 
 
    height: 10vh; 
 
} 
 
#hamburger { 
 
    height: 10vh; 
 
    float: right; 
 
} 
 
img { 
 
    display: inline-block; 
 
    vertical-align: middle; 
 
}

<header> 
 
    <img id="logo" src="//placehold.it/300x75?text=csi_logo.svg" alt="csi logo" /> 
 
    <img id="focus" src="//placehold.it/300x75?text=home_icon.svg" alt="focus" /> 
 
    <img id="hamburger" src="//placehold.it/300x75?text=hamburger_icon.svg" alt="hamburger" /> 
 
</header>

プレビュー

出典

2016-12-04 21:01:21

早く答えを受け入れないための私の謝罪、私は私がになっていたことを知らなかった...まだ新しいstackoverflowの時笑。私はあなたに感謝のメッセージを送ったと思います。もしそれが終わっていなければ、あなたの返事をありがとう！ – Ingo

@Ingo確か...いつでも... '：D'どこにメッセージを送りましたか？ –

HTML5ヘッダー要素に余分なスペースがある

答えて

関連する問題