ignore padding div inside div - CSS - css

Question

I have a div inside another div and I want this second div to ignore the padding, the second div to have full width and no margin bottom. How can I make it work?
#first {
padding: 10px;
border: 1px solid #000;
}
#second {
background-color: red;
color: #fff;
}
<div id="first">
first div with 10px padding
<div id="second">
no padding
</div>
</div>

Answer 1

Inner element can compensate parents padding by using negative margin.
#second {
background-color:red;
color:#fff;
margin: -10px;
}
http://jsfiddle.net/n5yx8903/1/

Answer 2

wrap text in p or span tag
<div id="first">
<p>first div with 10px padding</p>
<div id="second">
no padding
</div>
</div>
set margin for element wrapping text, this will be the cleanest solution.
https://jsfiddle.net/n5yx8903/

Answer 3

Set margin-left and margin-right to -10px.
#second{
background-color:red;
color:#fff;
padding: 0;
margin-left: -10px;
margin-right: -10px;
}
Here is Fiddle.

Answer 4

Well CSS is not intended to do this,
you may do this with negative margin, but as you see in the fiddle, it will then overflow:
http://jsfiddle.net/n5yx8903/6/
#first{
padding:10px;
border:1px solid #000;
}
#second{
background-color:red;
color:#0ff;
margin:-10px;
}
Maybe this SO answer will help you understand this problem better:Why does CSS not support negative padding?

Answer 5

That is not doable in CSS. I think when that happens there are two options you can do.
Use negative margin to compensate the padding
Restructure the HTML
I would choose the latter one whenever possible and use negative margin as a fallback option.
#container {
border: 1px solid #000;
}
#first {
padding: 10px;
}
#second {
background-color: red;
color: #fff;
}
<div id="container">
<div id="first">
first div with 10px padding
</div>
<div id="second">
no padding
</div>
</div>

Answer 6

You can just put "first div with 10px padding" text into another div:
#first {
border: 1px solid #000;
}
#second {
background-color: red;
color: #fff;
}
#inner {
padding: 10px;
}
<div id="first">
<div id="inner">
first div with 10px padding
</div>
<div id="second">
no padding
</div>
</div>

Answer 7

You can just switch the divs
#first{
border:1px solid #000;
}
#second{
background-color:red;
color:#fff;
padding:0px 10px;
}
<div id="first">
<div id="second">
first div with 10px padding
</div>
no padding
</div>