忽略父级填充

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

这里是什么，我有一个简单的例子：

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

你会发现水平线由10px的出父的延伸。我试图让它忽略父div中需要的所有东西的填充。

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

来源

2010-11-28 Sam

易修复，只是做

margin:-10px

在小时。

来源

2010-11-28 11:39:19 Sam

这工作，但问题是，它不会扩展父div的全长。这是因为填充不包含在100px宽度中，这意味着它实际上是120px宽度，而您的`

`将距离div的末端20px。看到这个jsFiddle我的意思是：http://jsfiddle.net/YVrWy/1/ – 2010-11-28 11:42:19

是的，当我加入它时，我已经解决了这个问题;宽度是不相关的。 – Sam 2010-11-28 11:45:02

+12

如果你需要100％宽度，只需使用auto作为宽度属性。宽度将根据给定的边距进行计算。 – schlingel 2013-10-31 12:08:12

问题可能会归结为您正在使用的箱型号。你使用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

来源

2010-11-28 12:16:32

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

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

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

来源

2010-11-28 12:19:14 easwee

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

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

来源

2013-01-07 20:19:31 sqram

margin: 0 -10px;

优于

margin: -10px;

后来吸内容垂直插入它。

来源

2015-03-04 01:23:10 honkskillet

在很大程度上，这个问题已被回答，但在每个人的小部分。我在一分钟前处理了这个问题。

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

.panel 
{ 
    padding: 30px; 
} 

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

我做了一个演示here与更多的肉体驱动的想法。但是，上面的关键元素将抵消任何父级填充，并且子级上的负边距匹配。然后最关键的是如果你想运行全宽度的孩子然后设置宽度为自动。（如上面的评论中提到的schlingel所述）。

来源

2015-08-29 07:26:26

对于图像的目的，你可以做这样的事情

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

来源

2017-08-10 13:27:39 adriancho5692

忽略父级填充

回答

相关问题