要素同士の上下の間にある謎の空白を埋めたい

Question

前提・実現したいこと

要素同士の上下の間にある謎の空白を埋めたい

発生している問題・エラーメッセージ

heightを指定すると余分な余白ができてしまい、heightをなくせばその余白はなくなるが縦長になってしまいレイアウトがくずれる

 <div class="main-contents__list">
                    <article class="main-contents__block">
                        <figure class="main-contents__image">
                            <a href="#">
                                <img src="" alt=""
                                    width="350" height="">
                            </a>
                        </figure>
                        <section class="main-contents__texts">
                            <p class="main-contents__time">2020/09/09</p>
                            <h2><a href="">タイトルタイトル</a></h2>

                            <p class="main-contents__description">
                                テキスト</p>
                        </section>
                        <p class="btn"><a href="#">READ MORE</a></p>
                    </article>繰り返し



                   
                </div>

該当のソースコード

.main-contents {
        max-width: 1200px;
        margin: 0 auto;
        margin-top: 30px;
        
        .main-contents__title{
            font-size: 30px;
            margin-bottom: 30px;
            margin-left: 25%;
            @include border();
            
            
        }
        .main-contents__box {
            display: flex;
            
            .main-contents__list {
                word-wrap: break-word;
                flex-wrap: wrap;
                justify-content: space-around;
                margin: 0 auto;
                word-break: break-all;
                display: flex;
                list-style: none;
                margin-bottom: 0;
                
                @include common-block("large");
                
            }
        }
    }

 @else if( $type == 'large' ){
    //スタイル
    .main-contents__block{
        list-style: none;
        width: 350px;
        height: 500px;
        border: 1px solid $main;
        border-radius: 5px;
        overflow: hidden;
        box-shadow: 0 0 8px gray;      
        @include btn();
        text-align: center;
        margin-bottom: 30px;
        
        .main-contents__texts{
            word-break: break-all;
            padding: 30px;
            text-align: center;
            
            .main-contents__time{
                margin-bottom: 10px;
            }   
            h2{
                margin-bottom: 10px;
                a{
                    color: $main-contents_a;
                }
            }
            
            
        }
      
    }
  }

試したこと

heightの指定を変えたがだめだった。
横にサイドバーがあるのだがそれをずらしてみても解決しなかった。

補足情報（FW/ツールのバージョンなど）

ここにより詳細な情報を記載してください。

Comments

[hayato7]

謎の空白というのは、開発者ツールで調べると、どのの要素が作っていますか？
(空のpタグの可能性ならwordpress特有のものだと思います。)

[ral819]

article要素同士の間ですね。
まだwordpress化しておらずhtmlコーディングのみなのでその線の可能性は低いと思います。

[ral819]

画像を追加しました。

[hayato7]

画像の間はmargin-bottomで空いているだけではないでしょうか。

ブラウザの検証ツールはご存知でしょうか。

[ral819]

いやmarginではないです。
30pxしか指定していませんし、消しても残ります
検証ツールは知っています。

[hayato7]

そうだったんですね。貼り付けていただいているソースを私のローカル環境で試してみると、marginを消せばうまくいったためそうだと思ってしまいました。
申し訳ありません。

[ral819]

全然大丈夫です！
無事解決しました！
色々ありがとうございました。

Answer 1

.main-contents__listのCSSに
align-items: flex-start;を追加したら変わりませんか？

Comments

[ral819]

変わらなかったです、、

[退会済みユーザー]

そうですか、もしかしたらと思いましたが。
違ったようですね、すみません。

元のコードで確認してみましたが、
写真の様な隙間はできませんでした。（MacのChrome）