顏色只包含元素的內容

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 */ 
}