ignore padding div inside div - 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>

I dont believe this is possible. And i dont understand why you would ever wanna do it Please read up on padding — Anoxy, Oct 28 '15 at 08:43
Not sure if that exactly what you want, but you can add negative margin to second div `margin: -10px;` — Igal S., Oct 28 '15 at 08:45

score 2 · Answer 1 · answered Oct 28 '15 at 08:45

2

Inner element can compensate parents padding by using negative margin.

#second {
    background-color:red;
    color:#fff;
    margin: -10px;
}

http://jsfiddle.net/n5yx8903/1/

answered Oct 28 '15 at 08:45

Māris Kiseļovs

16,957
5
41
48

Wonder why this got down voted. [**Negative margin**](http://www.w3.org/wiki/The_CSS_layout_model_-_boxes_borders_margins_padding#Negative_margins) is totally valid. May i suggest doing `margin: 0 -10px -10px;` to avoid the the elements overlapping each other. +1 – DavidDomain Oct 28 '15 at 08:56

score 0 · Answer 2 · answered Oct 28 '15 at 08:45

0

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/

answered Oct 28 '15 at 08:45

pankijs

6,531
3
16
13

score 0 · Answer 3 · answered Oct 28 '15 at 08:47

0

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.

answered Oct 28 '15 at 08:47

Noopur Dabhi

1,867
25
38

score 0 · Answer 4 · edited May 23 '17 at 11:45

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?

score 0 · Answer 5 · edited Jan 29 '19 at 00:27

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>

score -1 · Answer 6 · answered Oct 28 '15 at 08:48

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>

score -1 · Answer 7 · answered Oct 28 '15 at 08:52

-1

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>

answered Oct 28 '15 at 08:52

Gacci

1,388
1
11
23

Whoever is marking down can explain why, or just being annoying? – Gacci Oct 28 '15 at 09:14

ignore padding div inside div - CSS

7 Answers7