記事一覧を作りたいのですが、下に変な余白がついてしまいます

前提・実現したいこと

記事一覧を作っています。
3つの記事があります。
記事ごとにimageとtext-boxがあり、text-boxの中にはtextとdateがある状態です。

配置まではできたのですが、date下に余白がついていて他の記事との高さが合いません。
背景色の緑色まで入ってきていて、どうなっているのかわかりません。

どうかご教示ください。
宜しくお願い致します。

該当のソースコード

html
1<section class="blog">
2    <div class="blog-container">
3      <div class="blog-title" data-aos="fade-up" data-aos-easing="ease-out-sine" data-aos-duration="500">
4        <h1 class="blog-titletext">ブログ</h1>
5        <p class="blog-subtext">BLOG</p>
6      </div>
7      <div class="blog-article-wrapper">
8        <ul class="blog-article-box">
9          <li class="blog-article-item" data-aos="flip-up" data-aos-easing="ease-out-sine" data-aos-duration="1000"
10            data-aos-delay="100"><a href="">
11              <img src="img/blog01@2x.png" alt="サイトをリニューアルオープンしました" class="blog-article-img">
12              <div class="blog-article-text-box">
13                <div class="blog-article-text-wrapper">
14                  <p class="blog-article-text">
15                    サイトをリニューアルオープンしました。
16                  </p>
17                </div>
18                <div class="blog-article-date-wrapper">
19                  <time datetime=”2020-01-23” class="blog-article-date">2020.01.23</time>
20                </div>
21              </div>
22            </a></li>
23          <li class="blog-article-item" data-aos="flip-up" data-aos-easing="ease-out-sine" data-aos-duration="1000"
24            data-aos-delay="200"><a href="">
25              <img src="img/blog02@2x.png" alt="WebサイトでSEO内部施策に適したコー
26                ディングでどれぐらいサイトが早くなるの
27                か検証してみました" class="blog-article-img">
28              <div class="blog-article-text-box">
29                <div class="blog-article-text-wrapper">
30                  <p class="blog-article-text">
31                    WebサイトでSEO内部施策に適したコーディングでどれぐらいサイトが早くなるのか検証してみました。
32                  </p>
33                </div>
34                <div class="blog-article-date-wrapper">
35                  <time datetime=”2020-01-24” class="blog-article-date">2020.01.24</time>
36                </div>
37              </div>
38            </a></li>
39          <li class="blog-article-item" data-aos="flip-up" data-aos-easing="ease-out-sine" data-aos-duration="1000"
40            data-aos-delay="300"><a href="">
41              <img src="img/blog03@2x.png" alt="ユアコーディングではデザイナーの方を
42                広く募集しています" class="blog-article-img">
43              <div class="blog-article-text-box">
44              <div class="blog-article-text-wrapper">
45                <p class="blog-article-text">
46                  ユアコーディングではデザイナーの方を広く募集しています。
47                </p>
48              </div>
49              <div class="blog-article-date-wrapper">
50                <time datetime=”2020-01-25” class="blog-article-date">2020.01.25</time>
51              </div>
52              </div>
53            </a></li>
54        </ul>
55      </div>
56    </div>
57  </section>

scss
1
2$sp: 375px;
3
4@mixin sp {
5  @media (max-width: ($sp)) {
6    @content;
7  }
8}
9
10blog {
11  height: auto;
12  background-color: #EEFBFB;
13  padding-bottom: 50px;
14
15  .blog-container {
16    width: 90%;
17    margin: 0 auto;
18
19    .blog-title {
20      text-align: center;
21      padding: 64px 0 55px;
22
23      @include sp {
24        padding: 50px 0 30px;
25      }
26
27      .blog-titletext {
28        color: #333333;
29        font-size: 32px;
30        font-weight: bold;
31        line-height: 0.9;
32        margin-bottom: 23px;
33
34        @include sp {
35          font-size: 24px;
36          margin-bottom: 10px;
37        }
38      }
39
40      .blog-subtext {
41        color: #3BA6C9;
42        font-size: 16px;
43        font-weight: bold;
44        line-height: 1.2;
45
46        @include sp {
47          font-size: 14px;
48        }
49      }
50    }
51
52    .blog-article-wrapper {
53
54      .blog-article-box {
55        display: flex;
56        justify-content: space-between;
57
58        .blog-article-item {
59          list-style: none;
60          width: 31%;
61          margin-right: 30px;
62          box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16);
63
64          @include sp {
65            width: auto;
66          }
67
68          a {
69            text-decoration: none;
70            display: flex;
71            flex-direction: column;
72
73            .blog-article-img {
74
75              @include sp {
76                height: auto;
77                width: 100%;
78              }
79            }
80
81            .blog-article-text-box {
82              height: auto;
83              background-color: white;
84              display: flex;
85              flex-direction: column;
86
87              .blog-article-text-wrapper {
88
89                padding: 19px 30px 11px 18px;
90                display: block;
91
92                .blog-article-text {
93                  color: #333333;
94                  font-size: 18px;
95                  font-weight: bold;
96                  line-height: 1.4;
97                }
98
99                p {
100                  display: block;
101                  margin-block-start: 1em;
102                  margin-block-end: 1em;
103                  margin-inline-start: 0px;
104                  margin-inline-end: 0px;
105                }
106              }
107
108              .blog-article-date-wrapper {
109                text-align: right;
110
111                .blog-article-date {
112                  color: #444444;
113                  font-size: 16px;
114                  font-weight: bold;
115                  line-height: 1.6;
116                  margin-top: auto;
117                }
118              }
119            }
120          }
121        }
122      }
123    }
124  }
125}
126

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

scssで書いています。

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

回答1件

ベストアンサー

回答の前にちょっとお願いですが、変数とミックスインの定義部分もコードに含めておいてください。
それがないと、こちらで検証できません。（前回の質問の時も同様の修正依頼をしましたよね。）

今回だけは、エスパーしてかってに下記のような定義だとして回答します。
次回からはこの定義部分も含めるようにしてください。お願いします。

scss
1$sp: 480px;  // スマホ
2
3@mixin sp {
4  @media (max-width: ($sp)) {
5    @content;
6  }
7}

回答

下記のように修正・追加すればいいでしょう。
修正部分（3か所）はコメントしてあります。

scss
1.blog {
2  height: auto;
3  background-color: #EEFBFB;
4  padding-bottom: 50px;
5
6  .blog-container {
7    width: 90%;
8    margin: 0 auto;
9
10    .blog-title {
11      text-align: center;
12      padding: 64px 0 55px;
13
14      @include sp {
15        padding: 50px 0 30px;
16      }
17
18      .blog-titletext {
19        color: #333333;
20        font-size: 32px;
21        font-weight: bold;
22        line-height: 0.9;
23        margin-bottom: 23px;
24
25        @include sp {
26          font-size: 24px;
27          margin-bottom: 10px;
28        }
29      }
30
31      .blog-subtext {
32        color: #3BA6C9;
33        font-size: 16px;
34        font-weight: bold;
35        line-height: 1.2;
36
37        @include sp {
38          font-size: 14px;
39        }
40      }
41    }
42
43    .blog-article-wrapper {
44
45      .blog-article-box {
46        display: flex;
47        justify-content: space-between;
48
49        .blog-article-item {
50          list-style: none;
51          width: 31%;
52          margin-right: 30px;
53          box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16);
54
55          @include sp {
56            width: auto;
57          }
58
59          a {
60            text-decoration: none;
61            display: flex;
62            flex-direction: column;
63            height: 100%; //追加
64
65            .blog-article-img {
66
67              @include sp {
68                height: auto;
69                width: 100%;
70              }
71            }
72
73            .blog-article-text-box {
74              height: 100%; // autoから修正
75              background-color: white;
76              display: flex;
77              flex-direction: column;
78              justify-content: space-between; //追加
79
80              .blog-article-text-wrapper {
81
82                padding: 19px 30px 11px 18px;
83                display: block;
84
85                .blog-article-text {
86                  color: #333333;
87                  font-size: 18px;
88                  font-weight: bold;
89                  line-height: 1.4;
90                }
91
92                p {
93                  display: block;
94                  margin-block-start: 1em;
95                  margin-block-end: 1em;
96                  margin-inline-start: 0px;
97                  margin-inline-end: 0px;
98                }
99              }
100
101              .blog-article-date-wrapper {
102                text-align: right;
103
104                .blog-article-date {
105                  color: #444444;
106                  font-size: 16px;
107                  font-weight: bold;
108                  line-height: 1.6;
109                  margin-top: auto;
110                }
111              }
112            }
113          }
114        }
115      }
116    }
117  }
118}