Q&A
模写コーディングをしているのですが、background-imageで指定した上下に余白が出来てしまい、元のソースを見ても解決しなかったのでここで質問させていただきました。
HTML
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <link rel="stylesheet" href="style.css"> <link href="https://use.fontawesome.com/releases/v5.6.1/css/all.css" rel="stylesheet"> <title>Document</title> </head> <body> <header> <div class="container"> <div class="header-left"> <img src="isaralogo.png" alt=""> <h2>バンコクのノマドエンジニア育成講座</h2> </div> <div class="header-right"> <a href="">お問い合わせ/資料請求はこちら</a> </div> </div> </header> <div class="contents-wrapper"> <div class="container"> <div class="main"> <div class="top-message"> <h1>プログラミングで<br>人生の安定を手にいれよう</h1> <img src="isaralogo.png" alt=""> <h2>バンコクのノマドエンジニア育成講座<br>iSara[イサラ] </h2> </div> <div class="recruit"> <h2>まずは２０日間で、<br>月１０万円稼げるスキルを手にいれよう。</h2> <h2 class="otoku">※受講料金は実質０円です。詳しくは資料請求をどうぞ。</h2> <a href="" class="recruit-btn">お問い合わせ/資料請求はこちら</a> <h2>第６期生：2019年11月25日 ~ 2019年12月14日＊締め切りました</h2> <h2>第７期生：2020年2月17日 ~ 2019年3月7日＊締め切りました</h2> <h2>第8期生：2020年4月〜5月ごろを予定＊資料請求受付中です</h2> <a href="" class="btn twitter"><span class="fab fa-twitter"></span>ツイート</a> <a href="" class="btn facebook-good"><span class="fab fa-facebook-f"></span>いいね</a> <a href="" class="btn facebook-share">シェア</a> </div> <div class="intro"> <div class="intro-message"> <h1> <span class="kako1"></span>エンジニアとして本当の自由を手に入れるためには？<span class="kako2"></span></h1> </div> <div class="intro-message2"> <p>エンジニア需要の高まりに伴い、プログラミングスクールが増えています。<br> しかしそこでの学習の先は、 提携して決められた就職先に就職すること。</p> <p>これで本当にいいのですか？、<br> 日本人エンジニアはアメリカと較べて給料が格段に低い。<br> その理由がここにあり、 エンジニアは自分の給料をコントロールすべきなのです。</p> <p>スキルを身につけたエンジニアは、人生をコントロールすることでより自由に。<br> そこで必要なのが <span class="under-line">「稼ぐ力」</span>です。</p> </div> </div> <div class="about"> <div class="about-circle"> <p>ABOUT</p> </div> <div class="about-description"> <div class="about-title"> <h1><span class="kako3"></span>ノマドエンジニア育成講座<br>iSara[イサラ]とは<span class="kako4"></span></h1> <p>「 稼ぐこと 」にフォーカスしたWebエンジニア育成講座です。</p> </div> <div class="about-skills"> <div class="about-heading"> <p>稼げるエンジニアに必要な５つのスキルとは？</p> </div> <div class="five-skills"> <div class="skills"> <img src="skill.jpg" alt=""> <p>基礎的なプログラミングスキル </p> </div> <div class="skills "> <img src="sales.jpg" alt=" "> <p>案件獲得に必要な 営業力</p> </div> <div class="skills "> <img src="document.jpg" alt=" "> <p>見積もり作成から 納品までの知識 </p> </div> <div class="skills "> <img src="plusone.jpg" alt=" "> <p>自分の付加価値を 高めるスキル </p> </div> <div class="skills "> <img src="connection.jpg" alt=""> <p>フリーランス同士の 横のつながり </p> </div> </div> </div> </div> </div> <div class="isara-study"> <div class="study-top"> <div class="study-heading"> <h1>iSaraで「基本的なプログラミングスキル」は教えません</h1> <p>基礎的なプログラミングスキルは無料で学べる時代。<br>iSaraでは、基礎知識学習は<span class="study-line">事前課題</span>と<span class="study-line">チャットサポートのみ。</span></p> </div> <div class="steps"> <div class="step"> <h3 class="step-line">STEP1</h3> <p>【バンコク渡航前１ヶ月<br>事前課題で基礎知識を学ぶ</p></body> </html></div> <div class="step"> <h3 class="step-line">STEP2</h3> <p>【バンコク到着後】<br>実践的に稼ぐことに特化した学習</p> </div> <div class="step"> <h3 class="step-line">STEP3</h3> <p>【バンコク帰国後<br>講座実施後の案件獲得サポート</p> </div> </div> </div> <div class="other-skills"> <p>スキルアップしてもフリーランスエンジニアとして食べていくことは難しい。<br> フリーランスには<span class="study-line">プログラミングスキル以外</span>が大切。</p> </div> </div> </div> </div> </div> <footer></footer> <script src="script.js "></script>
CSS
.top-message {
background-image: url("main.jpg");
width: 100%;
background-size: cover;
text-align: center;
}
.study-top {
background-image: url("aboutsecondbg.jpg");
background-size: cover;
padding-bottom: 30px;
}
回答1件
0
ベストアンサー
マージンの相殺が親要素と子要素で発生しているのが原因です。
.top-messageの場合だと、子要素の h1要素のデフォルトの上マージンが親要素の外側に出てしまってます。(下のマージンは h2要素の下マージンが外側に出ている。)
マージンの相殺 - CSS: カスケーディングスタイルシート | MDN
対策は下記にいろいろな例が紹介されています。
marginの相殺の理解を深めよう | Stocker.jp / diary
例えば、paddingを設定するとマージンの相殺を防げます。
css
1.top-message { 2 padding-top: 1px; 3 padding-bottom: 1px; 4}
投稿2020/02/11 06:04
総合スコア33782
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2020/02/11 06:10
2020/02/11 06:14