忽略父级填充

Question

我试图让我的水平规则忽略父填充.

这是我所拥有的一个简单示例:

#parent {
  padding:10px;
  width:100px;
}
hr {
  width:100px;
}

您会发现水平规则延伸到父级之外10px.我试图让它忽略父div中其他所有内容所需的填充.

我知道我可以为其他一切做一个单独的div; 这不是我正在寻找的解决方案.

Answer 1

轻松修复,就这样做

margin:-10px

在小时.

Answer 2

出于图像目的,您可以执行类似的操作

img {
    width: calc(100% + 20px); // twice the value of the parent's padding
    margin-left: -10px; // -1 * parent's padding
}

Answer 3

总的来说,这个问题已经得到了回答,但每个人都有一小部分.我在一分钟前处理过这个问题.

我想在面板底部有一个按钮托盘,面板周围有30px.按钮托盘必须是底部和侧面齐平.

.panel
{
  padding: 30px;
}

.panel > .actions
{
  margin: -30px;
  margin-top: 30px;
  padding: 30px;
  width: auto;
}

我在这里做了一个带有更多肉体的演示来推动这个想法.但是,上面的关键元素会偏移任何父填充,并在子项上显示匹配的负边距.那么最重要的是如果你想运行子全宽,然后将宽度设置为auto.(如上文schlingel的评论中所述).

Answer 4

有点迟了.但它只需要一些数学.

.content {
  margin-top: 50px;
  background: #777;
  padding: 30px;
  padding-bottom: 0;
  font-size: 11px;
  border: 1px dotted #222;
}

.bottom-content {
  background: #999;
  width: 100%; /* you need this for it to work */
  margin-left: -30px; /* will touch very left side */
  padding-right: 60px; /* will touch very right side */
}

<div class='content'>

  <p>A paragraph</p>
  <p>Another paragraph.</p>
  <p>No more content</p>


  <div class='bottom-content'>
      I want this div to ignore padding.
  </div>

我没有Windows所以我没有在IE中测试这个.

小提琴: 小提琴示例..

Answer 5

margin: 0 -10px; 

比

margin: -10px;

后者将内容垂直吸入其中。

Answer 6

如果您有一个带有垂直填充的父容器，并且您希望该容器内的某些内容（例如图像）忽略其垂直填充，则可以为“顶部”和“底部”设置负数但相等的边距：

margin-top: -100px;
margin-bottom: -100px;

实际价值似乎并不重要。还没有为水平填充尝试过这个。

Answer 7

另一种解决方案：

position: absolute;
top: 0;
left: 0;

只需将顶部/右侧/底部/左侧更改为您的情况。