我在 html 中制作了两个 div
标签,最外层的 div 标签有圆 Angular ,但是当我尝试用颜色填充内部 div
但有一些空白位于内部 div
上方(请参阅屏幕截图以获得更多说明)。我想为 class-"header"
完全填充颜色。我想用蓝色填充上 Angular 附近的空白区域。
#widget {
position: fixed;
left: 340px;
top: 75px;
width: 450px;
height: 500px;
border-style: solid;
border-width: 1px;
box-shadow: 0 0 4px 0;
border-radius: 10px;
}
.container {
background-color: #0071B3;
width: 450px;
height: 250px;
}
.header {
text-align: center;
}
<div id="widget">
<div class="container">
<div class="header">
<h4>Let's Enhance</h4>
</div>
<div class="info">
<div>
</div>
</div>
最佳答案
.container
顶部的空白是由h4
元素的margin-top
引起的。您可以将其替换为 padding top
并在 #widget
上添加 overflow:hidden
以防止任何内容(此处为方 Angular )溢出。
这是一个工作片段。
#widget {
position: fixed;
width: 450px;
height:500px;
border-style: solid;
border-width: 1px;
box-shadow: 0 0 4px 0;
border-radius: 10px;
overflow:hidden;
}
.container{
background-color: #0071B3;
width:450px;
height:250px;
}
.header{
text-align: center;
}
h4{
margin-top: 0;
padding-top:1rem;
}
<div id="widget">
<div class="container">
<div class="header">
<h4>Let's Enhance</h4>
</div>
<div class="info">
<div>
</div>
</div>
关于html - 我无法使用 css 用颜色填充圆 Angular ?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/50087229/