headerの上部分に、空間が出来てしまいます。

headerの上部分に、意図していない空間が出来てしまいます。

CSS
1@charset "utf-8";
2
3/* ========================================
4    リセットcss
5========================================= */
6html, body, div, span, applet, object, iframe,
7h1, h2, h3, h4, h5, h6, p, blockquote, pre,
8a, abbr, acronym, address, big, cite, code,
9del, dfn, em, img, ins, kbd, q, s, samp,
10small, strike, strong, sub, sup, tt, var,
11b, u, i, center,
12dl, dt, dd, ol, ul, li,
13fieldset, form, label, legend,
14table, caption, tbody, tfoot, thead, tr, th, td,
15article, aside, canvas, details, embed,
16figure, figcaption, footer, header, hgroup,
17menu, nav, output, ruby, section, summary,
18time, mark, audio, video {
19	margin: 0;
20	padding: 0;
21	border: 0;
22	font-style:normal;
23	font-weight: normal;
24	font-size: 100%;
25	vertical-align: baseline;
26}
27article, aside, details, figcaption, figure,
28footer, header, hgroup, menu, nav, section {
29	display: block;
30}
31html{overflow-y: scroll;}
32blockquote, q {quotes: none;}
33blockquote:before, blockquote:after,q:before, q:after {content: ''; content: none;}
34input, textarea,{margin: 0; padding: 0;}
35ol, ul{list-style:none;}
36table{border-collapse: collapse; border-spacing:0;}
37caption, th{text-align: left;}
38a:focus {outline:none;}
39/* ========================================
40    header
41========================================= */
42header{
43  width: 100%;
44  height: 80px;
45  background-color:darkgrey;
46} 
47
48.zzz{
49    justify-content: space-between;
50}
51.aaa{
52    background-color: darkkhaki;
53    height: 80px;
54}
55.aaaa{
56    display: flex;
57}
58
59.x{
60    padding: 32px 0px ;
61    font-size: 16px;
62    font-weight: bold;
63    color: #1B224C;
64
65}
66
67.aaaaaa{
68padding-right: 28px;
69
70}
71
72.aaaaaaa{
73}
74/* ========================================
75隣
76========================================= */
77
78.b{
79    display: flex;
80    background-color: darkkhaki;
81    height: 80px;
82}
83
84.xxx{
85    text-align: right;
86
87
88}
89
90.z{
91    font-size: 12px;
92    margin-right: 23px;
93}
94
95.zzz{
96display: flex;
97padding-top: 10px;
98}
99
100.zz{
101    font-size: 16px;
102    font-weight: bold;
103    margin-right: 29px;
104}
105
106.zzzz{
107    margin-right: 5px;
108}
109
110.bbb{
111   
112}
113.bbbb{
114    display: flex;
115 
116}
117
118.bbbbb{
119    background-color: #F5A623;
120    padding: 18px 43px;
121    margin-right: 10px;
122    text-decoration: none;  
123    border-radius:5px;
124}
125
126.xx{
127     font-size: 14px;
128    font-weight: bold;
129    color: #fff;
130  
131}
132.link {
133    text-decoration: none;
134  }
135
136.bbbbbb{
137    background-color: #1B224C;
138    padding: 18px 26px 17px 27px; 
139    margin-right: 10px;
140    text-decoration: none;
141    border-radius:5px;
142}
143

HTML
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4  <meta charset="utf-8" />
5  <meta name="viewport" content="width=device-width,initial-scale=1" />
6  <meta name="keywords" content="共通キーワード" />
7  <meta name="description" content="共通ディスクリプション" />
8  <title>Engress</title>
9
10  <link rel="stylesheet" type="text/css" href="<?php echo get_template_directory_uri(); ?>/assets/css/styles.css" />
11</head>
12<body>
13<header> 
14    <div class="zzz">
15    <nav class="aaa">
16        <ul class="aaaa">
17            <li class="aaaaaa aaaaaaa"><img src="<?php echo get_template_directory_uri(); ?>/assets/images/logo1.png"/></li>
18            <li class="aaaaaa x"><a>ホーム</a></li>
19            <li class="aaaaaa x"><a>お知らせ</a></li>
20            <li class="aaaaaa x"><a>ブログ</a></li>
21            <li class="aaaaaa x"><a>コース・料金</a></li>
22        </ul>
23    </nav>
24    <div class="b">
25            <div class="xxx">
26         <p class="z">平日8:00~20:00</p>
27         <div class="zzz">
28        <p class="zzzz"><img src="<?php echo get_template_directory_uri(); ?>/assets/images/pus 29.png" class="main-logo" alt="Engress"/></p>
29            <div class="zz">0123-456-7890</div>
30        </div>    
31        </div>
32        <nav class="bbb">
33            <ul class="bbbb">
34                <li class="bbbbb"><a href="#"style="text-decoration: none;"><p class="xx">資料請求</p></a></li>
35                <li class="bbbbbb"><a href="#"style="text-decoration: none;"><p class="xx">お問い合わせ</p></a></li>
36            </ul>
37        </nav>
38     </div>
39     </div>
40    </div>
41</header>
42</body>
43</html>

paddingやmarginを削除しても出てきます。
背景の色を指定して確認したところ、

<nav class="aaa">と<div class="b">部分に原因があると思います。![イメージ説明](2dac9bfb0644589a62a2b48ccfb93b09.png)

初心者ですので、基本的なミスかも知れません、
黄色の背景の上に隙間が空いてしまいます。

skys215

2021/12/16 07:34

開発者ツールを利用し、そのスペースはどの要素のスタイルか確認をしましたか？

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

回答1件

ベストアンサー

もしかしてこれのことですか？

css
1.zzz {
2	display: flex;
3	padding-top: 10px; /* ←これ？ */
4}

投稿2021/12/16 07:16

Lhankor_Mhy

総合スコア36960

2232

2021/12/26 15:36

ありがとうございました。助かりました。

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

あなたの回答

tips

プレビュー

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

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

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

ただいまの回答率
85.35%

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

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

質問する

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

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

headerの上部分に、空間が出来てしまいます。

関連した質問