Trying to create a customized box with CSS, my code is as follows. Some attributes like width and height have been omitted due to restrictions on characters.
.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>The result shows some space between the outer grey border and the inner green bar which I can't explain.