Question

我正在尝试让我的水平规则忽略父填充。

以下是我所拥有的一个简单示例：

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

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

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

Answer 1

轻松修复，只需

margin:-10px

on hr。

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;
}

我做了一个有更多肉体的演示here来推动这个想法。但是，上面的关键元素会偏移任何父填充，并在子项上显示匹配的负边距。那么最重要的是如果你想运行子全宽，然后将宽度设置为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中测试它。

小提琴： fiddle example..

Answer 5

你的父母是120px宽 - 每边是100宽+20填充，所以你需要让你的线宽120px。这是代码。下次请注意填充符合元素宽度。

#parent
{
    width: 100px;
    padding: 10px;
    background-color: Red;
}

hr
{
    width: 120px;
    margin:0 -10px;
    position:relative;
}

Answer 6

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

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

实际值似乎无关紧要。还没有尝试水平填充。

Answer 7

问题可归结为您正在使用的盒子型号。你在用IE吗？

当IE处于怪癖模式时，width是盒子的外部宽度，这意味着填充将在内部。因此，框内剩余的总面积为100px - 2 * 10px = 80px，在这种情况下，100px宽<hr>看起来不正确。

如果您处于标准模式，width是您的框的内部宽度，并在外部添加填充。因此，框的总宽度为100px + 2 * 10px = 120px，在<hr>的框内只留下100px。

要解决此问题，请调整IE的CSS值。（检查Firefox以查看它是否正常）。或者更好的是，设置文档类型以使浏览器进入严格模式 - 其中IE也遵循标准盒模型。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
        "http://www.w3.org/TR/html4/strict.dtd">
<html>
 ...

http://www.quirksmode.org/css/quirksmode.html

Answer 8

另一种解决方案：

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

只需更改案例的顶部/右侧/底部/左侧即可。

Answer 9

margin: 0 -10px;

优于

margin: -10px;

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

Answer 10

容易修复..添加到父div：

box-sizing：边框框；

Answer 11

这是另一种方法。

<style>
    .padded-element{margin: 0px; padding: 10px;}
    .padded-element img{margin-left: -10px; width: calc(100% + 10px + 10px);}
</style>
<p class="padded-element">
    <img src="https://images.pexels.com/photos/3014019/pexels-photo-3014019.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940">
</p>

以下是repl.it上的一些示例：https://repl.it/@bryku/LightgrayBleakIntercept

Answer 12

如果您将hr从屏幕的左侧一直移到右侧，这是用于确保视图宽度不受影响的代码。

hr {
position: absolute;
left: 0;
right: 0;
}

忽略父级填充

12 个答案: