Q&A
（質問文は編集できます）質問文のコードはそれぞれコードブロックで囲んでいただけませんか？ ```（バッククオート3つ）で囲み、前後に改行をいれるか、コードを選択して「<code>」ボタンを押すとコードブロックになります。PCであれば記入エリアの右部分あたりにリアルタイムに結果が表示されていると思うので、そこを見ながら調整してください。
前提・実現したいこと
初投稿になります。
webサイト作成の練習中です。
header（画像）と.introの間に謎の余白（白い部分）があります。
marginを0にしても余白が消えません。
デベロッパーツールを確認したらbody要素が余白になっていました。
画像と.introを確認しても余白の設定がありません。
余計な余白を消したいです。
発生している問題・エラーメッセージ
HTML
1<html lang="en"> 2<head> 3 <meta charset="UTF-8"> 4 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 5 <title>Work With</title> 6 <link rel="stylesheet" href="style.css" type="text/css" media="screen"> 7 <meta name="viewport" content="width=device, intial-scale=1,shrink-to-fit=no"> 8</head> 9 10 11 12 13<body> 14 <header> 15 <div class="logo"> 16 <h1> 17 <img src="/images/logo-work_with.svg" alt="LOGO"> 18 </h1> 19 </div> 20 </header> 21 <div class="intro"> 22 <section> 23 <h2>創造しよう</h2> 24 <p>WorkWithは全く新しいワーキングコミュニティの形です。<br> 25 全ての人がもっと自由に、自分の才能を最大限活用できるよう<br> 26 働くという行為自体をデザインします。<br> 27 アイディアとインスピレーション溢れるこの空間で<br> 28 次の時代の価値を創造しましょう。</p> 29 </section> 30 </div>
CSS
1* { 2 padding: 0; 3 margin: 0; 4 box-sizing: border-box; 5 font-size: 62.5%; 6} 7 8body { 9 min-width: 1000px; 10 font-family: 游ゴシック体, YuGothic, "游ゴシック Medium", "Yu Gothic Medium", 游ゴシック, "Yu Gothic", sans-serif; 11 font-weight: 500; 12 line-height: 2; 13 color: rgb(51, 51, 51); 14 height: auto; 15 background: #FFFFF3; 16} 17 18header { 19 background: url(images/cafe.jpeg) no-repeat center top; 20 background-size: 100% 100%; 21 max-width: 100%; 22 position: relative; 23 height: 570px; 24 background-color: lightgreen 25} 26 27.logo { 28 position: absolute; 29 top:80%; 30 left:5%; 31} 32 33.intro { 34 padding: 100px 0; 35 display: flex; 36 justify-content: center; 37 height: auto; 38 background-color: lightcoral; 39} 40 41.intro section h2 { 42 font-size: 3.2rem; 43 margin-bottom: 50px; 44 text-align: center; 45 color: #333333; 46} 47 48.intro section p { 49 text-align: center; 50 line-height: 1.75; 51 color: #656562; 52 font-size: 1.6rem; 53} 54
試したこと
htmlの.introのクラスの内容全て消すと余白が消えます。
cssを１つ１つ消して確認しましたが、分かりませんでした。
ここに問題に対して試したことを記載してください。
補足情報（FW/ツールのバージョンなど）
ここにより詳細な情報を記載してください。
コードブロックはHTML/CSSの2つで十分です。それともコードブロックとして区切った部分ごとに別ファイルにされているのでしょうか。
回答1件
0
ベストアンサー
<div class="intro">の左に全角空白が入っています。
HTML
1 </header> 2 <div class="intro"> 3 <section>
【初心者向け！Chromeの検証機能（デベロッパーツール）の使い方】
https://saruwakakun.com/html-css/basic/chrome-dev-tool
【ChromeデベロッパーツールでCSSをチェックする方法 | なんでものびるWEB】
https://nandemo-nobiru.com/2944/
投稿2020/05/16 08:30
総合スコア69606
見事に直りました！全角の余白が入っているとはビックリでした笑
ありがとうございます！
あなたの回答
tips
プレビュー
