对div进行着色而不对填充区域着色

Question

如果我有一个div：

<div></div>

还有一些css给它一种颜色：

div {
    width: 200px;
    height: 200px;
    padding: 20px;
    background-color: red;
}

然后它也为填充区域着色。有没有办法在不改变边框或边距属性的情况下避免这种情况？

Answer 1

您可以使用

background-clip: content-box;

Answer 2

您可以创建两个不同大小的正方形，一个在另一个内。

看到这个小提琴：http://jsfiddle.net/a_incarnati/5ouvn063/2/

<强> CSS

div.inner {
    width: 200px;
    height: 200px;
    padding: 20px;
    background-color: red;
}
div.outer {
    width: 240px;
    height: 240px;
    padding: 20px;
    background-color: blue;        
}

<强> HTML

<div class="outer"><div class="inner"></div></div>

实际上，您甚至可以移除外部div的宽度和高度，并将元素向左浮动。

修改

div.inner {
    width: 200px;
    height: 200px;
    padding: 20px;
    background-color: red;
}
div.outer {
    padding: 20px;
    background-color: blue;
    float:left; 
    text-align:center;    
}

DEMO＃2 http://jsfiddle.net/a_incarnati/5ouvn063/3/