Color only content of element - html

Question

background-color colors the total size of the element, including padding and border. Is there a way to color only the content background without the padding and border?
Make only the 220px yellow.
div.ex {
width: 220px;
padding: 10px;
border: 5px solid;
margin: 15px;
background-color:yellow;
}

Answer 1

Here we go for your div
<div>Some text or anything</div>
Set CSS like this:
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;
}
See Demo

Answer 2

if I understood correctly, you could create an inner div with a 100% width, this will fill all the parent without the padding.
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;
}
Example
http://jsfiddle.net/2zDvK/

Answer 4

you can do this trick
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

Is there a way to color only the content background without the
padding and border?
Presumably the easiest way to simulate that would be to use an inset box-shadow of the same size as your padding.
Demo: http://jsfiddle.net/z8q33/
Relevant 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 */
}