忽略父级填充

我试图让我的横向规则忽略父补丁。

这里有一个简单的例子:

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

你会发现水平线的规则超出父母的10px。 我试图让它忽略其他所有父div的需要填充。

我知道,我可以为其他所有事情分开一个独立的部门。 这不是我正在寻找的解决scheme。

简单的修复,只是做

 margin:-10px 

在小时。

有点晚了,但只需要一点math。

 .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中testing这个。

小提琴: 小提琴的例子..

大体上这个问题已经得到了答复,但在所有人的小部分。 我在一分钟前处理了这个问题。

我想在面板底部有一个button托盘,面板的周围有30px。 button托盘必须是齐平的底部和两侧。

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

我在这里做了一个更多的肉体演示,以推动这个想法。 但是,上面的关键元素将抵消任何父级填充,并且在子级上具有匹配的负边距。 然后最关键的是,如果你想运行全宽度的孩子,然后将宽度设置为自动。 (如上面schlingel的评论中所提到的)。

问题可能会归结为您正在使用的盒子模型。 你使用IE吗?

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

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

要解决它,要么调整您的IE浏览器的CSS值。 (检查火狐,看看它看起来好吗)。 甚至更好的是,设置文档types以将浏览器踢入严格模式 – 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

你的父母是120px宽 – 这是100宽度+ 20填充每边,所以你需要使你的行120px宽。 这是代码。 下一次请注意,填充加起来就是元素的宽度。

 #parent { width: 100px; padding: 10px; background-color: Red; } hr { width: 120px; margin:0 -10px; position:relative; } 

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

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

比…更好

 margin: -10px; 

后者将内容垂直吸入。