Question

background-color颜色元素的总大小，包括填充和边框。有没有办法只为内容背景着色而没有填充和边框？

仅制作220px黄色。

div.ex {
    width: 220px;
    padding: 10px;
    border: 5px solid;
    margin: 15px;
    background-color:yellow;
}

Answer 1

我们在这里找你的div

<div>Some text or anything</div>

像这样设置CSS：

div {
margin:0px auto;
width:100%;
height:50px;
background-color:white;
float:left;
padding:10px;
border:2px solid red;
position: relative;
z-index: 10;}

div:after {
background-color: grey;
content: '';
display: block;
position: absolute;
top: 10px;
left: 10px;
right: 10px;
bottom: 10px;
z-index: -1;

}

请参阅Demo

Answer 2

如果我理解正确的话，你可以创建一个宽度为100％的内部div，这将填充没有填充的所有父级。

http://jsbin.com/bocalulu/5/edit?html,css,output

Answer 3

div.ex {
width: 220px;
padding: 10px;
border: 5px solid yellow;
margin: 15px;
background-color:yellow;
display: inline-block;
}

示例

http://jsfiddle.net/2zDvK/

Answer 4

你可以做到这一点

div.ex {
    width: 220px;
    border: 15px solid COLOR; /* COLOR - color of the background of the parent element */
    margin: 15px;
    padding: 0;
    background-color:yellow;
}

Answer 5

有没有办法只为内容背景着色而不用填充和边框？

大概最简单的模拟方法是使用与填充相同大小的插入阴影。

演示：http://jsfiddle.net/z8q33/

相关CSS ：

div {
    width: 220px;
    padding: 10px;
    border: 5px solid;
    margin: 15px;
    background-color: yellow;
    box-shadow: inset 0 0 0 10px #ccc; /* same size as that of padding */
}

仅颜色元素的颜色

5 个答案: