忽略 div 内的填充 div - CSS答案

【问题标题】：ignore padding div inside div - CSS忽略 div 内的填充 div - CSS
【发布时间】：2016-01-27 22:45:21
【问题描述】：

我在另一个 div 中有一个 div，我希望第二个 div 忽略填充，第二个 div 具有全宽并且没有底部边距。我怎样才能让它发挥作用？

#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>

【问题讨论】：

标签： css

【解决方案1】：

内部元素可以通过使用负边距来补偿父内边距。

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

【讨论】：

想知道为什么这被否决了。 Negative margin 完全有效。我可以建议做margin: 0 -10px -10px; 以避免元素相互重叠。 +1

【解决方案2】：

在 p 或 span 标签中换行

    <div id="first">
    <p>first div with 10px padding</p>
    <div id="second">
        no padding
    </div>
</div>

为元素环绕文本设置边距，这将是最干净的解决方案。

【讨论】：

【解决方案3】：

将 margin-left 和 margin-right 设置为 -10px。

#second{
    background-color:red;
    color:#fff;
    padding: 0;
    margin-left: -10px;
    margin-right: -10px;
}

这里是Fiddle。

【讨论】：

【解决方案4】：

好吧，CSS 不是为了这样做，

您可以使用负边距执行此操作，但正如您在小提琴中看到的那样，它将溢出： http://jsfiddle.net/n5yx8903/6/

#first{
    padding:10px;
    border:1px solid #000;
}
#second{
    background-color:red;
    color:#0ff;
    margin:-10px;
}

也许这个 SO 答案会帮助你更好地理解这个问题：Why does CSS not support negative padding?

【讨论】：

【解决方案5】：

这在 CSS 中是不可行的。我认为当这种情况发生时，您可以采取两种选择。

我会尽可能选择后者，并使用负边距作为后备选项。

#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>

【讨论】：

【解决方案6】：

您可以将“第一个具有 10px 填充的 div”文本放入另一个 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>

【讨论】：

【解决方案7】：

你可以只切换div

#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>

【讨论】：