Q&A
うまくいきました。ありがとうございました。
hrml cssで基本を勉強しているのですが、ヘッダーの背景色について質問です。
下の画像のように、ヘッダーの背景の下の色をなくすようにしたいです。
以下のようなコードを打っています。
<html lang="ja"> <head> <meta charset="utf-8"> <title>サンプル</title> <meta name="viewport" content="width=device-width"> <link rel="stylesheet" href="index.css"> </head> <body> <header class="page-header wrapper"> <h1 class="h1class"><a href="#"><img src="1.jpg" alt="ロゴ"></a></h1> <nav> <ul class="main-nav"> <li>いいい</li> <li>ううう</li> <li>えええ</li> </ul> </nav> </header> </body> コード
body{margin: 0; font-family: 'メイリオ','Hiragino Kaku Gothic Pro', sans-serif;} img {max-width: 100%; height: auto;} .page-header{background-color:#e1eec1; display: flex; justify-content: space-between; align-items: center;} .h1class{margin-top: 0px; margin-bottom: 0px;} .main-nav{list-style: none; display: flex; font-size: 25px; margin-top: 0px; margin-bottom: 0px;} .main-nav li{margin-left: 10px;} .wrapper{padding: 0 5%;} コード
.h1classと.main-navにmargin-top: 0px;とmargin-bottom: 0px;にしたのですが、margin-bottom: 0px;だけうまく効きません。
わかる方いましたらご教授よろしくお願いします。
回答4件
0
ベストアンサー
こちらでいかがでしょうか?
CSS
1h1 img { 2 display: block; 3}
投稿2020/05/21 07:32
総合スコア4528
0
css
1img{ 2 display: block; 3}
または、
css
1img{ 2 vertical-align: bottom; 3}
とするとどうですか？
投稿2020/05/21 08:24
総合スコア36960
0
下記を指定してみてください。
css
1img{ 2 vertical-align:top; 3 /* top以外(middle,bottom etc.)でも可 */ 4}
参考
【css】画像(img)の下に余白（隙間）ができる問題を秒で解決する方法
【CSS】画像の下に謎の余白ができちゃう問題を解決する方法
画像を設置した時にできる隙間を無くす
投稿2020/05/21 07:34
総合スコア3235
0
CSS
1.h1class a, 2.h1class img { 3 display: block; 4} 5```**動くサンプル：**[https://jsfiddle.net/qk32ubzw/](https://jsfiddle.net/qk32ubzw/)
投稿2020/05/21 07:30
総合スコア69606
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2020/05/21 07:34