CSS Box模型：边框影响间距

Question

在我的页面中，我分为三个部分。如果我没有为它们指定边框，则其文本将从其顶部开始。但是，当我指定边框时，在它们的顶部和其文本的顶部（以及文本的下方）之间会出现一个空格。为什么会这样？

这是代码：

之前

* {
  box-sizing: border-box;
}

h1 {
  text-align: center;
}

#chicken {
  background-color: red;
}

#chicken-title {
  background-color: aqua;
}

#beef {
  background-color: blue;
}

#beef-title {
  background-color: maroon;
}

#sushi {
  background-color: grey;
}

#sushi-title {
  background-color: olive;
}

.title {
  position: absolute;
  right: 0px;
  margin-top: 0px;
  border-width: 1px;
  border-color: black;
  border-style: solid;
}

.text {

}

.section {
  position: relative;
  border-width: 1px;
  border-color: black;
  border-style: solid;
}

<h1>Our Menu</h1>
<section class="row">
  <section id="chicken" class="section">
    <h2 id="chicken-title" class="title">Chicken</h2>
    <p class="text">
      Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
      in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    </p>
  </section>
  <section id="beef" class="section">
    <h2 id="beef-title" class="title">Beef</h2>
    <p class="text">
      Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
      in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    </p>
  </section>
  <section id="sushi" class="section">
    <h2 id="sushi-title" class="title">Sushi</h2>
    <p class="text">
      Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
      in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    </p>
  </section>
</section>

之后

* {
  box-sizing: border-box;
}

h1 {
  text-align: center;
}

#chicken {
  background-color: red;
}

#chicken-title {
  background-color: aqua;
}

#beef {
  background-color: blue;
}

#beef-title {
  background-color: maroon;
}

#sushi {
  background-color: grey;
}

#sushi-title {
  background-color: olive;
}

.title {
  position: absolute;
  right: 0px;
  margin-top: 0px;
}

.text {

}

.section {
  position: relative;
}

<h1>Our Menu</h1>
<section class="row">
  <section id="chicken" class="section">
    <h2 id="chicken-title" class="title">Chicken</h2>
    <p class="text">
      Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
      in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    </p>
  </section>
  <section id="beef" class="section">
    <h2 id="beef-title" class="title">Beef</h2>
    <p class="text">
      Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
      in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    </p>
  </section>
  <section id="sushi" class="section">
    <h2 id="sushi-title" class="title">Sushi</h2>
    <p class="text">
      Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
      in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    </p>
  </section>
</section>

在.title中指定边框时：

border-width: 1px;
border-color: black;
border-style: solid;    

输出为：

当我删除这些行时，输出更改为：