Use border-box to set the height and width not working

Question

section {
  height: 400px;
  display: block;
}

.blog {
  box-sizing: border-box;
  display: inline-block;
  width: 33%;
  height: 100%;
  padding: 60px 0;
}

.blog figure img {
  width: 100px;
  height: 50%;
}

.blog figurecaption {
  border-left: 1px solid rgba(255, 8, 8, 0.15);
  padding-left: 8px;
  margin-left: 6px;
}

.blog article {
  width: 100%;
  text-align: center;
}

<section>
  <div class="blog">
    <article>
      <p>This is my Doy. His name is Dogson</p>
    </article>
    <figure>
      <img src="resource/picture/dogson.JPG" />
    </figure>
    <figurecaption>Dogson 2021.03.25</figurecaption>
  </div>
  <div class="blog">
    <article>
      <p>I shaved my head</p>
    </article>
    <figure>
      <img src="resource/picture/bald.JPG" />
    </figure>
    <figurecaption>Bald Head 2021.10.12</figurecaption>
  </div>
  <div class="blog">
    <article>
      <p>I love Chinese food</p>
    </article>
    <figure>
      <img src="resource/picture/Chinese_Food.JPG" />
    </figure>
    <figurecaption>Chinese Food 2022.03.17</figurecaption>
  </div>
</section>

I set the width to 100% of the parent div (which is 400px) and width to 33% of the parent div (which is displayed in block) and set the "blog" class to border-box. But the size of the "blog" class div still differs in height.

Below is what these codes output:

Could anyone help me with this?