要素と要素の間の空白を消したい

下の画像のように、要素と要素の間に空白が生まれてしまいます。
paddingやmarginをゼロにしても空白は消えませんでした。
昨日ずっとコードを確認していたのですが、結局原因を突き止めることができませんでした。
どうすればこの空白は消えるのでしょうか？回答よろしくお願いいたします。

HTML
1 <!-- ニュース -->
2     <section class="hako2">
3      <div class="news">
4        <h2>NEWS</h2>
5       </div>
6        <div class="product-detail">
7        <h3>MORE</h3>
8     </div>
9    </section>
10 
11
12   <!-- 画像と文字の横並び -->
13   
14
15<div class="wrap">
16  <div class="box">
17    <div class="img"><img src="https://s3-ap-northeast-1.amazonaws.com/paspol-images/wp-content/uploads/2021/09/paspol_closing-2-800x450.jpg" alt="lastsale"></div>
18    <div class="right-text">
19      <p class="title">【セール情報あり】PAS-POLオンラインショップ閉店のお知らせ</p>
20      <p class="text">
21        いつも、PAS-POLのサイトをご覧いただきありがとうございます。突然ではございますが、この度2021年9月30日をもちまして、PAS-POL公式オンラインショップを閉鎖する運びとなりました。（※PAS-POLのブランドがなくなるわけではありません）
22         
23        2015年の夏からスタートしたオンラインショップですが、旅が好きな方、TABIPPOを知ってくださってる方、ライフスタイルにこだわりたい方、などたくさんの方にPAS-POLの商品を公式ショップにて購入いただいたこと、と…</p>
24    </div>
25
26  </div>
27  <div class="box">
28    <div class="img"><img src="https://s3-ap-northeast-1.amazonaws.com/paspol-images/wp-content/uploads/2021/07/summer_postcard-2.jpg" alt="lastsale"></div>
29    <div class="right-text">
30      <p class="title">【募集期間延長】人気の絶景ポストカード製作中！日本の「夏」の絶景を大募集します</p>
31      <p class="text">こんにちは、TABIPPOの中　美砂希です。
32東急ハンズやLOFTにて販売されている、旅好きな方とつくってきたPAS-POLの絶景ポストカードですが、制作が再開しましたのでお知らせいたします。
33
34今回の制作は、四季に合わせて募集をしています。年間を通して募集をするので、彩り豊かな四季折々の写真のご応募をお待ちしております。第二弾は、夏の風景写真を募集いたします！
35
36現在の予定では以下のスケジュールで募集を行い（変更の可能性あり）、夏以降募集の際にはまた、改めてお知ら
37</p>
38    </div>
39
40  </div>
41

CSS
1.hako2 {
2  display: flex;
3  background-color: #f6f6f6;
4  /* margin: 0px; */
5}
6
7/* 4ページ目ニュース */
8
9.wrap {
10  background-color: #f6f6f6;
11}
12
13
14.news h2 {
15  /* 文字の幅 */
16  display: block;
17  background-color: #f6f6f6;
18  margin: 100px 0px 50px 340px;
19  font-size: 30px;
20  font-weight: normal;
21  /* 下の波線img */
22  background: url(https://pas-pol.jp/wp-content/themes/pas-pol/dist/img/sectionTitle-underLine@2x.png) no-repeat;
23  background-size: 68px 8px;
24  background-position: 0 bottom;
25  padding-bottom: 17px;
26  line-height: 1;
27  font-family: "Gill Sans Std Book", sans-serif;
28  letter-spacing: 0.1em;
29  display: flex;
30}
31
32.product-detail h3 {
33  display: inline-block;
34  margin: 100px 0px 50px 500px;
35  padding: 10px 55px 10px 55px;
36  border: solid 1px;
37  font-family: "Gill Sans Std Book", sans-serif;
38  font-weight: 400;
39  font-size: 14px;
40  background-image: url(https://pas-pol.jp/wp-content/themes/pas-pol/dist/img/button-arrow@2x.png) no-repeat;
41  background-position: 0 right 0 0;
42}
43
44.wrap .box {
45  display: flex;
46  margin: 20px 350px 20px 350px;
47}
48
49.box img {
50  width: 50%;
51  width: 320px;
52  margin: 20px 0 0 0;
53}
54
55 
56.wrap .box .right-text {
57  display: flex;
58  flex-direction: column;
59  /* justify-content: center; */
60  margin-left: 30px;
61  width: 50%;
62}
63
64.right-text {
65  width : 460px;
66}
67
68.right-text .title {
69  font-size: 18px;
70  line-height: 31px;
71  font-weight: 700;
72  letter-spacing: 1.8px;
73  font-family: "Helvetica Neue", Helvetica, Arial, 游ゴシック, YuGothic, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", メイリオ, Meiryo, sans-serif;;
74}
75
76.right-text .text {
77  color: #656c6e;
78  font-size: 13px;
79  line-height: 22px;
80  font-weight: 400;
81  display: -webkit-box;
82  overflow: hidden;
83-webkit-box-orient: vertical;
84-webkit-line-clamp: 7;
85padding-bottom: 0px;
86  font-family: "Helvetica Neue", Helvetica, Arial, 游ゴシック, YuGothic, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", メイリオ, Meiryo, sans-serif;;
87}
88

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

回答2件

ベストアンサー

マージンの相殺という現象ですね。

今回の場合は、親の.wrapの外側に子の.boxのマージントップがはみ出しているという状況です。

.boxのマージントップを0にすれば空白は消えます。
ただ、マージントップを0にすると他に影響があるので変更したくない場合、いろいろ方法がありますが、
例えば、

css
1.wrap {
2  background-color: #f6f6f6;
3  display: flow-root; /* 追加 */
4}

display: flow-root; はIEはサポートしていないので、IEも対象にしたいなら、

css
1.wrap {
2  background-color: #f6f6f6;
3  overflow: hidden; /* 追加 */
4}

flex や grid でレイアウトするというのも解決法の一つです。

投稿2021/09/23 00:59

hatena19

総合スコア33795

bibibin07

2021/10/07 16:51 編集

マージンの相殺動画で学んだことはありましたが、この問題に直面したのは初めてでした。状況まで説明してくださってありがとうございます。マージントップを0にしたら空白が消えました!

退会済みユーザー

2021/09/23 17:06

マージンの相殺！これは初めて知りました。+1

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

質問にある<section class="hako2"> と <div class="wrap"> をコピペして、<body>・・・</body> の中に入れたHTMLを作ると、問題の空白は以下を追加で消える。

CSS
1body {
2    display: flex;
3    flex-direction: column;
4    margin: 0;
5}

なので、<section class="hako2"> と <div class="wrap"> の親に上のスタイルがあたるようにすれば、どうにかなるんやない？という希望的観測をしております。

投稿2021/09/22 19:58

編集2021/09/22 20:19

退会済みユーザー

総合スコア0

bibibin07

2021/09/23 15:05

回答ありがとうございます！参考になります。

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

あなたの回答

tips

プレビュー

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

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

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

ただいまの回答率
85.46%

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

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

質問する

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

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

要素と要素の間の空白を消したい

関連した質問