忽略父填充

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

这里有一个简单的例子:

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

您会发现水平规则从父级扩展了10px。我试图让它忽略父 div 中所有其他内容所需的填充。

我知道我可以为其他所有事情单独创建一个 div; 这不是我要寻找的解决方案。

219073 次浏览
小开
最佳答案

简单的解决办法，只要做

margin:-10px

人力资源部。

小开

问题可能会归结为你使用的是哪个盒子模型。你正在使用 IE 吗？

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

如果您在标准模式下，width是您的方块的内部宽度，填充添加到外部。所以盒子的总宽度是 100px + 2 * 10px = 120px，正好在盒子里留下100px 给你的 <hr>。

要解决这个问题，可以为 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

小开

您的父级是120px 宽-这是100宽度 + 20填充每边，所以您需要使您的行120px 宽。这是密码。下次注意，填充会增加元素的宽度。

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


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

有点晚了，不过需要点数学。

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

小提琴: 举个例子。

小开 
margin: 0 -10px;

比

margin: -10px;

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

小开

总的来说，这个问题已经得到了回答，但是每个人都在小范围内回答了这个问题。我一分钟前才处理过这事。

我想有一个按钮托盘在一个面板的底部，其中面板有30像素左右。按钮托盘必须是平滑的底部和侧面。

.panel
{
padding: 30px;
}


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

我做了一个演示 给你与更多的肉驱动的想法。但是，上面的关键元素用子元素上匹配的负边距来抵消任何父元素填充。然后最关键的，如果你想运行子全宽，然后设置宽度自动。(正如上面 施林格尔评论中提到的)。

小开

为了图像的目的，你可以这样做

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

简单修复. . 添加到父 div:

盒子尺寸: 边框;

小开

还有另一种方法。

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

下面是一些关于 rep.it 的例子: https://repl.it/@bryku/LightgrayBleakIntercept

小开

如果你有一个带垂直填充的父容器，你想让容器里的某个东西(例如图片)忽略它的垂直填充，你可以为“ top”和“ bottom”设置一个负的，但是相等的边距:

margin-top: -100px;
margin-bottom: -100px;

实际值看起来并不重要，还没有在水平填充中尝试过这种方法。

小开

另一种解决办法:

position: absolute;
top: 0;
left: 0;

只需将顶部/右侧/底部/左侧更改为您的情况。

小开

如果你后一个方法为人直接从左边的一个屏幕到右边这是代码使用，以确保视图宽度没有受到影响。

hr {
position: absolute;
left: 0;
right: 0;
}

提交答案