Question

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

＆＃13;

array[1]

＆＃13;

array[4]

＆＃13;

Answer 1

内部元素可以使用负边距来补偿父级填充。

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

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

Answer 2

用p或span标签包装文本

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

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

https://jsfiddle.net/n5yx8903/

Answer 3

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

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

这是Fiddle。

Answer 4

CSS不打算这样做，

你可以用负边距做到这一点，但正如你在小提琴中看到的那样，它会溢出： http://jsfiddle.net/n5yx8903/6/

<div>
    <table>
        <tr>
            <td>A1</td><td>A2</td><td>A3</td><td>A4</td>
            <td>A5</td><td>A6</td><td>A7</td><td>A8</td>
            <td>A9</td><td>A10</td><td>A11</td><td>A12</td>
        </tr>
        <tr>
            <td>B1</td><td>B2</td><td>B3</td><td>B4</td>
            <td>B5</td><td>B6</td><td>B7</td><td>B8</td>
            <td>B9</td><td>B10</td><td>B11</td><td>B12</td>
        </tr>    
    </table>
</div>

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

Answer 5

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

使用负边距来补偿填充
重构HTML

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

#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

你可以把＆＃34;第一个div用10px填充＆＃34;文本到另一个div：

＆＃13;

#first {
  border: 1px solid #000;
}
#second {
  background-color: red;
  color: #fff;
}
#inner {
  padding: 10px;
}

＆＃13;

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

＆＃13;

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

忽略div里面的填充div - CSS

7 个答案: