HTML/CSS（BootStrap）余白を消したいです

前提・実現したいこと

HTML/CSSの学習のため、Bootstrapを用いたWebページ(https://www.airbnb.jp/host/homes?_set_bev_on_new_domain=1582461265_MjJlNGU1NmYzMzNi)の模写を行っています。
しかし、ヘッダー部分を作成中に、ヘッダーの上部分に想定外の余白ができてしまいました。

そこで、以下2点について教えていただけましたら幸いです。
・なぜこのような余白ができてしまうのか
・どのように対処すればよいか

よろしくお願いいたします。

該当のソースコード

html
1<!DOCTYPE html>
2<html lang="ja">
3	<head>
4		<meta charset="UTF-8">
5		<link rel="stylesheet" href="css/style.css">
6		<title>Airbnbでお家、アパート、お部屋をシェアしよう</title>
7
8		<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
9	</head>
10	<body>
11		<header>
12			<div class="container-fulid">
13				<div class="header-logo">
14					<a href="#">
15						<img src="img/header-logo.svg" alt="header-logo" width="34" height="34">
16					</a>
17				</div>
18				<div class="header-list">
19					<ul>
20						<li>概要</li>
21						<li>準備</li>
22						<li>安全</li>
23						<li>マネープラン</li>
24					</ul>
25				</div>
26			</div>
27		</header>
28		
29		<div class="main">
30			main
31		</div>
32
33		<footer>
34			<div class="container-fulid">
35				footer
36			</div>
37		</footer>
38	</body>
39</html>

css
1
2* {
3	box-sizing: border-box;
4	padding: 0;
5	margin: 0;
6}
7
8/*共通*/
9body {
10
11}
12
13li {
14	list-style: none;
15}
16
17/*header*/
18header {
19	background-color: pink;
20}
21
22header .container-fulid {
23	height: 82px;
24}
25
26.header-logo {
27	margin-left: 24px;
28	line-height: 80px;
29	float: left;
30}
31
32
33header li {
34	float: left;
35	line-height: 80px;
36}
37
38/*main*/
39.main {
40	background-color: aqua;
41}
42
43/*footer*/
44footer {
45	background-color: lime;
46}

試したこと

ヘッダー要素のfloat:leftを解除したところ、余白がなくなることを確認しています。
また、Bootstrapのcontainerを使わなければ余白がなくなることも確認しました。

行動規範の内容に同意します

回答2件

ベストアンサー

原因はulの高さを指定してないことです。高さのないulにBootstrapによってmargin-bottom: 1remが設定されているためこのようなことが起きています。ulのmarginを0に書き換えるか、liのline-heightを80pxにしているのであれば、ulの高さも80pxにすることで解決します。

追記
floatを適用した子要素は親要素から浮いた形となり、ulは要素を持たなくなるので高さが0となります。上記の方法以外にも、別の要素に影響を与えないようにするためulにoverflow: hiddenを書き加えてfloat状態を解除する方法もあります。こちらの方が良いかもしれません。

投稿2020/03/06 09:25

編集2020/03/06 09:53

soliste16

総合スコア757

fuyu123

2020/03/06 11:02

原因の詳細と対処法について教えていただきありがとうございます。

行動規範の内容に同意します

liがフロートしているので、ulが高さを失って、さらにmargin-bottom: 1rem;が聞いているのが原因です。

なので、

css
1.header-list ul {
2	display: flow-root;
3}

として、ブロック整形コンテキストを作るか、

css
1.header-list ul {
2	margin-bottom: 0;
3}

として、マージンを消すか、すれば解決するでしょう。

投稿2020/03/06 09:40

編集2020/03/06 09:41

Lhankor_Mhy

総合スコア36158

fuyu123

2020/03/06 11:04

ご回答本当にありがとうございました。

行動規範の内容に同意します

あなたの回答

tips

プレビュー

行動規範の内容に同意します

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

15分調べてもわからないことは
teratailで質問しよう！

ただいまの回答率
85.46%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう！