忽略父填充答案

【问题标题】：Ignore parent padding忽略父填充
【发布时间】：2010-11-28 11:32:44
【问题描述】：

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

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

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

你会发现水平线从父级延伸了 10px。我试图让它忽略父 div 中其他所有内容所需的填充。

我知道我可以为其他所有内容创建一个单独的 div；这不是我正在寻找的解决方案。

【问题讨论】：

标签： html css

【解决方案1】：

简单的解决方法

margin:-10px

在小时。

【讨论】：

这可行，但问题是它不会扩展父 div 的全长。这是因为填充不包含在 100px 宽度中，这意味着它实际上是 120px 宽，而您的 <hr> 将距离 div 的末尾 20px。请参阅此 jsFiddle 了解我的意思：jsfiddle.net/YVrWy/1
是的，我在添加它时解决了这个问题；宽度无关紧要。
如果您需要 100% 宽度，只需使用 auto 作为宽度属性。宽度将根据给定的边距计算。
你应该做类似... margin: 0 -15px; .....否则 hr 将垂直吸向它的相邻内容。
有点骇人听闻。希望有更好的方法

【解决方案2】：

为了图像的目的，你可以做这样的事情

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

【讨论】：

但是如果你不一定知道父母的填充怎么办？
当我使用最小宽度而不是宽度时，这对我有用。
@user5707327 您可以随时将样式与 javascript 结合起来以获取父级的填充

【解决方案3】：

另一种解决方案：

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

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

【讨论】：

【解决方案4】：

这个问题大体上已经回答了，但每个人都回答了一小部分。我在一分钟前处理过这个问题。

我想在面板底部有一个按钮托盘，面板周围有 30 像素。按钮托盘必须与底部和侧面齐平。

.panel
{
  padding: 30px;
}

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

我做了一个演示 here 用更多的肉来推动这个想法。然而，上面的关键元素抵消了与子元素匹配的负边距的任何父填充。然后最关键的是，如果你想全角运行孩子，然后将宽度设置为自动。（正如schlingel 上面的评论所述）。

【讨论】：

【解决方案5】：

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

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

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

【讨论】：

【解决方案6】：

如果您想要让 hr 从屏幕左侧直接向右移动，这是用于确保不影响视图宽度的代码。

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

【讨论】：

【解决方案7】：

简单修复.. 添加到父 div：

box-sizing: 边框框；

【讨论】：

【解决方案8】：

这是另一种方法。

<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

【讨论】：

【解决方案9】：

margin: 0 -10px;

优于

margin: -10px;

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

【讨论】：

【解决方案10】：

你的父母是 120 像素宽 - 即每边 100 宽度 + 20 填充，所以你需要让你的线宽 120 像素。这是代码。下次注意，内边距加起来就是元素宽度。

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

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

【讨论】：

定义宽度很容易。问题是当你不知道宽度时
@GuilhermeFerreira 在hr 中使用width: auto;。 jsfiddle.net/ToolmakerSteve/7p85dsrq/3 不幸的是，这个解决方案仍然需要知道父级设置的padding。

【解决方案11】：

有点晚了。但它只需要一点数学。

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

【讨论】：

你应该将padding-right:60px拆分为padding-left:30px;padding-right:30px，这样使用text-align: center时内容就不会偏移；

【解决方案12】：

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

当 IE 处于 quirks 模式时，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

【讨论】：