如何使用CSS创建标题框？

Question

我正在用CSS制作标题框。 我的代码是这样的。 我已经忽略了代码中的某些属性，例如width或height（因为我不知道为什么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 .headbar p {line-height：100％; 左边距：3％； margin-top：0px; }

Answer 2

 .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>