Q&A
隙間が無くなりました。
ありがとうございます。
header部分を作成していますが、画像のようにProfileの下に余白ができてしまいます。
何が原因なのでしょうか？
よろしくお願いします。
html
1<!DOCTYPE html> 2<html lang="en"> 3 <head> 4 <meta charset="UTF-8" /> 5 <meta http-equiv="X-UA-Compatible" content="IE=edge" /> 6 <meta name="viewport" content="width=device-width, initial-scale=1.0" /> 7 <title>Document</title> 8 <link rel="stylesheet" href="style.css" /> 9 </head> 10 <body> 11 <header class="header"> 12 <h1 class="header__logo logo"> 13 <a href="" class="logo__link"> 14 <img class="logo__img" src="img/logo.svg" alt="" 15 /></a> 16 </h1> 17 <nav class="nav"> 18 <ul class="nav__main"> 19 <li class="nav__list">About</li> 20 <li class="nav__list">Bicycle</li> 21 </ul> 22 </nav> 23 </header> 24 </body> 25</html>
css
1* { 2 margin: 0; 3 padding: 0; 4} 5 6.header { 7 display: flex; 8 justify-content: space-between; 9 align-items: center; 10 padding: 10px 30px; 11} 12.logo { 13 &__img { 14 width: 120px; 15 height: auto; 16 } 17 &__link { 18 display: block; 19 } 20} 21.nav { 22 &__main { 23 display: flex; 24 justify-content: space-between; 25 list-style: none; 26 } 27 &__list { 28 &:first-child { 29 margin-right: 30px; 30 } 31 } 32}
回答2件
0
「Profile」とはimgタグの img/logo.svg のことでしょうか。
h1タグで囲んでいるので、その font-size分の行高が画像の高さより大きいのが原因ですね。
h1.header__logo の font-size を画像の高さより小さくするか、
h1分の高さが欲しいなら、logo__link に下記のCSSを設定すればいいでしょう。
css
1 display: flex; 2 align-items: center;
投稿2021/10/25 06:08
総合スコア33699
0
ベストアンサー
img要素はデフォルトでインラインなので、display: block を加えるといいのではないかと思います。
css
1.logo__img { 2 width: 120px; 3 height: auto; 4 display: block; 5}
投稿2021/10/25 05:51
総合スコア36074
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。