html - 如何用CSS制作一个带标题的盒子？

Question

我正在用 CSS 制作一个带标题的框。我的代码是这样的。我在我的代码中忽略了一些属性，如宽度或高度。(因为我不知道为什么 stackoverflow 一直告诉我我这里的代码太多了。)

.sponsor_info {
  border-radius: 10px;
  border: 1px solid #eeeeee;
  width:200px;
  height:50px;
  padding: 0px;
}
.sponsor_info .headbar {
  border-radius:10px 10px 0px 0px;
  width:200px;
  height: 40px;
  margin-top: 0px;
  background-color: #8BBE26;
}
.sponsor_info .headbar p {
    font-size: 20px;
    font-family: arial;
    color:white;
    line-height: 100%;
    margin-left: 3%;
    margin-top:0px;
}

<div class="sponsor_info">
  <div class="headbar">
    <p>Sponsor Info</p>
  </div>
</div>

我可以得到类似下面的东西

现在的问题是:我不知道为什么外灰色边框和内绿色条之间有一些空间。

Answer 1

.sponsor_info {
  height: 200px;
  border-radius: 10px;
  border: 1px solid #eeeeee;
  padding: 0px;
}
.sponsor_info .headbar {
  height: 100px;
  border-radius: 10px 10px 0px 0px;
  margin-top: 0px;
  background: #8BBE26;
}
.sponsor_info .headbar p {
  line-height: 100px;
  margin-left: 3%;
  margin-top: 0px;
}

<div class="sponsor_info">
  <div class="headbar">
    <p>Sponsor Info</p>
  </div>
</div>