忽略父级填充
我试图让我的横向规则忽略父补丁。
这里有一个简单的例子:
#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> ...
你的父母是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;
后者将内容垂直吸入。