代码之家 › 专栏 › 技术社区 › Sam Johannes Rudolph

忽略父填充

css html

Sam Johannes Rudolph · 技术社区 · 15 年前

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

下面是一个简单的例子:

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

你会发现水平规则超出父规则10倍。我试图让它忽略父div中其他所有内容所需的填充。

我知道我可以为其他事情单独划分一个div;这不是我想要的解决方案。

7 回复 | 直到 7 年前

140

Sam Johannes Rudolph 15 年前

简单解决,就这样

margin:-10px

在人力资源部。

adriancho5692 9 年前

为了形象起见,你可以这样做

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

Community Mohan Dere 9 年前

总的来说,这个问题已经得到了回答,但每个人都回答了一小部分。我一分钟前刚处理过。

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

.panel
{
  padding: 30px;
}

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

我做了个演示 here 用更多的肉体来驱动这个想法。但是,上面的关键元素会用子元素上匹配的负边距偏移任何父填充。如果要运行子级全宽度,则最关键的是将“宽度”设置为“自动”。(如上述评论所述 schlingel ).

sqram 13 年前

有点晚了。不过需要一点数学知识。

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

我没有窗户,所以我没有在IE中测试这个。

小提琴: fiddle example..

easwee 15 年前

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

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

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

Martin Algesten 15 年前

问题可以归结为您使用的是哪种盒子模型。你在用IE吗?

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

如果你在标准模式下, 宽度 是框的内部宽度,并在外部添加填充。所以盒子的总宽度是 100px + 2 * 10px = 120px 把100像素放在盒子里 <人力资源部; .

要解决这个问题,可以调整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

honkskillet 11 年前

margin: 0 -10px;

比

margin: -10px;

后者将内容垂直地吸收到其中。

Jaclyn U 7 年前

简单解决。。添加到父div:

框大小:边框框;

Dillon Burnett 6 年前

这是另一种方法。

<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