html - 忽略父级填充

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

这是我所拥有的一个简单例子:

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

您会发现水平规则延伸到父级之外10px。 我试图让它忽略父div中其他所有内容所需的填充。

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

Sam asked 2019-08-13T12:27:17Z
7个解决方案
127 votes

轻松修复,就这样做

margin:-10px

在小时。

Sam answered 2019-08-13T12:27:42Z
16 votes

出于图像目的,您可以执行类似的操作

img {
    width: calc(100% + 20px); // twice the value of the parent's padding
    margin-left: -10px; // -1 * parent's padding
}
adriancho5692 answered 2019-08-13T12:28:07Z
7 votes

有点迟了。但它只需要一些数学。

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

小提琴:小提琴示例..

sqram answered 2019-08-13T12:28:48Z
7 votes

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

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

.panel
{
  padding: 30px;
}

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

我在这里做了一个带有更多肉体的演示来推动这个想法。 但是,上面的关键元素会偏移任何父填充,并在子项上显示匹配的负边距。 那么最重要的是如果你想运行子全宽,然后将宽度设置为auto。 (如上文schlingel的评论中所述)。

Mitchell Geere answered 2019-08-13T12:29:32Z
2 votes

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

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

hr
{
    width: 120px;
    margin:0 -10px;
    position:relative;
}
easwee answered 2019-08-13T12:29:59Z
1 votes

问题可能归结为您正在使用哪种箱型号。 你在用IE吗?

当IE处于怪癖模式时,width是您的盒子的外部宽度,这意味着填充将在内部。 因此,盒子内剩余的总面积是100px + 2 * 10px = 120px,在这种情况下,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]

Martin Algesten answered 2019-08-13T12:30:54Z
0 votes
margin: 0 -10px; 

比...更好

margin: -10px;

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

honkskillet answered 2019-08-13T12:31:20Z
translate from https://stackoverflow.com:/questions/4296530/ignore-parent-padding