忽略父填充

126

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

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

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

您会发现水平尺超出父级10像素。我试图让它忽略父div中其他所有内容所需的填充。

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

html css

— 山姆
source

160

轻松修复，只需做

margin:-10px

在小时。

— 山姆
source

9

这行得通，但问题是它不会扩展父div的全长。这是因为100px宽度中不包括填充，这意味着它实际上为120px宽，并且<hr>距div的末尾将为20px。看到这个jsFiddle是我的意思：jsfiddle.net/YVrWy/1

— Alastair Pitts 2010年

是的，我将其添加进去就算出来了；宽度无关紧要。

— 山姆

22

如果您需要100％的宽度，则只需使用auto作为width属性。宽度将根据给定的边距进行计算。

— schlingel

4

您应该执行以下操作... margin：0 -15px; .....否则，hr将垂直向其吸引附近的内容。

— honkskillet 2015年

有点黑。希望有更好的方法

— 老男孩

29

出于图像目的，您可以执行以下操作

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

— adriancho5692
source

8

但是，如果您不一定知道父母的脚垫怎么办？

1

当我使用最小宽度而不是宽度时，这对我有用。

— Pedro Nadolny

@ user5707327，您可以始终将样式与javascript结合使用以获得父级的填充

— adriancho5692

哇，天才使用负宽度！

— ，PizzaGuy先生

9

总体而言，每个人都回答了这个问题，但很少有人回答。我在一分钟前就处理了。

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

.panel
{
  padding: 30px;
}

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

我在这里做了一个演示，目的更多。但是，上面的关键元素会抵消任何父填充，并在子上匹配负的边距。然后，如果要以全角模式运行子级，然后将width设置为auto，则最关键。（如schlingel在上面的评论中所述）。

— 米切尔·吉尔
source

7

有点迟了，但这只需要一点数学。

.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中进行测试。

小提琴：小提琴的例子

— 平方
source

1

您应该将padding-right：60px拆分为padding-left：30px; padding-right：30px，以便在使用text-align：center;时内容不会偏移。

— 路加福音

3

margin: 0 -10px;

胜过

margin: -10px;

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

— honkskillet
source

2

您的父级宽度为120px-宽度为100像素+每侧有20个填充，因此您需要将线宽设为120px。这是代码。下次，请注意填充会增加元素的宽度。

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

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

— 伊斯威
source

1

具有定义的宽度很容易。问题是当您不知道宽度时

— Guilherme Ferreira 2014年

@GuilhermeFerreira width: auto;在中使用hr。jsfiddle.net/ToolmakerSteve/7p85dsrq/3 不幸的是，此解决方案仍然需要padding父级知道设置。

— 制造商

1

问题可能归结于您使用的是哪种盒子模型。您正在使用IE吗？

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

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

要解决此问题，请调整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

— 马丁·阿尔格斯坦
source

1

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

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

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

— 玛尼克斯
source

0

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

框大小：border-box；

— 杰克琳·乌
source

0

这是另一种方法。

<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

— 狄龙·伯内特（Dillon Burnett）
source