我遇到了一个问题,我的子元素的背景颜色超过了我的父元素边界。我该如何补救?
.package {
border: 1px solid black;
min-height: 200px;
margin-bottom: 1rem;
border-radius: 20px;
}
.banner {}
.fedex {
background-color: #4D148C;
color: white;
border-bottom: 3px solid #FF6600;
}
.logo {
padding: 1rem;
}
<div class="package">
<div class="banner fedex">
<div class="logo"></div>
</div>
</div>
编辑:我应该提一下,我尝试仅在 banner
的顶部添加相同的边框半径,但这会在颜色和父级边框之间留下一个小空白。
答案 0 :(得分:3)
overflow:hidden
将阻止内部子元素超出父元素的边界。
.package {
border: 1px solid black;
min-height: 200px;
margin-bottom: 1rem;
border-radius: 20px;
overflow:hidden;
}
.banner {}
.fedex {
background-color: #4D148C;
color: white;
border-bottom: 3px solid #FF6600;
}
.logo {
padding: 1rem;
}
<div class="package">
<div class="banner fedex">
<div class="logo"></div>
</div>
</div>
答案 1 :(得分:2)
除了使用overflow: hidden
,还可以使用contain: content
,它告诉其他元素该特定元素内的子元素永远不会影响其他元素,也永远不会显示在父元素之外元素。
.package {
border: 1px solid black;
min-height: 200px;
margin-bottom: 1rem;
border-radius: 20px;
/* ADDED */
contain: content;
}
.banner {}
.fedex {
background-color: #4D148C;
color: white;
border-bottom: 3px solid #FF6600;
}
.logo {
padding: 1rem;
}
<div class="package">
<div class="banner fedex">
<div class="logo"></div>
</div>
</div>
答案 2 :(得分:-2)
.package {
border: 1px solid black;
min-height: 200px;
margin-bottom: 1rem;
border-radius: 20px;
overflow: hidden;
}
.banner {}
.fedex {
background-color: #4D148C;
color: white;
border-bottom: 3px solid #FF6600;
}
.logo {
padding: 1rem;
}
<div class="package">
<div class="banner fedex">
<div class="logo"></div>
</div>
</div>