Html 忽略父填充
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4296530/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Ignore parent padding
提问by Sam
I'm trying to get my horizontal rule to ignore the parent padding.
我试图让我的水平规则忽略父填充。
Here's a simple example of what I have:
这是我所拥有的一个简单示例：
#parent {
padding:10px;
width:100px;
}
hr {
width:100px;
}
You will find that the horizontal rule extends out of the parent by 10px. I'm trying to get it to ignore the padding that everything else in the parent div needs.
你会发现水平线延伸出父级 10px。我试图让它忽略父 div 中所有其他内容所需的填充。
I'm aware that I could make a separate div for everything else; this is not the solution I'm looking for.
我知道我可以为其他所有内容创建一个单独的 div；这不是我正在寻找的解决方案。
回答by Sam
Easy fix, just do
轻松修复，只需做
margin:-10px
on the hr.
在小时。
回答by adriancho5692
For image purpose you can do something like this
出于图像目的，您可以执行以下操作
img {
width: calc(100% + 20px); // twice the value of the parent's padding
margin-left: -10px; // -1 * parent's padding
}
回答by Mitchell Geere
In large this question has been answered but in small parts by everyone. I dealt with this just a minute ago.
总的来说，这个问题已经得到了回答，但每个人都回答了小部分。我就在一分钟前处理了这个问题。
I wanted to have a button tray at the bottom of a panel where the panel has 30px all around. The button tray had to be flush bottom and sides.
我想在面板底部有一个按钮托盘，面板周围有 30 像素。按钮托盘必须与底部和侧面齐平。
.panel
{
padding: 30px;
}
.panel > .actions
{
margin: -30px;
margin-top: 30px;
padding: 30px;
width: auto;
}
I did a demo herewith more flesh to drive the idea. However the key elements above are offset any parent padding with matching negative margins on the child. Then most critical if you want to run the child full-width then set width to auto. (as mentioned in a comment above by schlingel).
我在这里做了一个演示，用更多的肉来推动这个想法。然而，上面的关键元素抵消了任何父填充与子元素匹配的负边距。然后最关键的是，如果您想全角运行子项，则将宽度设置为自动。（如schlingel在上面的评论中所述）。
回答by sqram
Kinda late.But it just takes a bit of 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>
I don't have Windows so I didn't test this in IE.
我没有 Windows，所以我没有在 IE 中测试这个。
fiddle: fiddle example..
小提琴： 小提琴示例..
回答by honkskillet
margin: 0 -10px;
is better than
比
margin: -10px;
The later sucks content vertically into it.
后者将内容垂直吸入其中。
回答by easwee
Your parent is 120px wide - that is 100 width + 20 padding on each side so you need to make your line 120px wide. Here's the code. Next time note that padding adds up to element width.
您的父级宽度为 120 像素 - 即每边 100 宽度 + 20 填充，因此您需要使线条宽度为 120 像素。这是代码。下次注意填充加起来就是元素宽度。
#parent
{
width: 100px;
padding: 10px;
background-color: Red;
}
hr
{
width: 120px;
margin:0 -10px;
position:relative;
}
回答by Martin Algesten
The problem could come down to which box model you're using. Are you using IE?
问题可能归结为您使用的是哪种盒子模型。你用的是IE吗？
When IE is in quirks mode, widthis the outer width of your box, which means the padding will be inside. So the total area left inside the box is 100px - 2 * 10px = 80pxin which case your 100px wide <hr>will not look right.
当 IE 处于 quirks 模式时，width是框的外部宽度，这意味着填充将在内部。因此，框内剩余的总面积是100px - 2 * 10px = 80px在这种情况下，您的 100 像素宽<hr>看起来不正确。
If you're in standards mode, widthis the inner width of your box, and padding is added outside. So the total width of the box is 100px + 2 * 10px = 120pxleaving exactly 100px inside the box for your <hr>.
如果您处于标准模式，width是框的内部宽度，并且在外部添加填充。因此，框的总宽度100px + 2 * 10px = 120px正好在框内为您的<hr>.
To solve it, either adjust your CSS values for IE. (Check in Firefox to see if it looks okay there). Or even better, set a document type to kick the browser into strict mode - where also IE follows the standard box model.
要解决它，请调整 IE 的 CSS 值。（在 Firefox 中查看它是否在那里看起来不错）。或者更好的是，设置文档类型以将浏览器踢入严格模式 - IE 也遵循标准框模型。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
...
回答by Jaclyn U
easy fix.. add to parent div:
容易修复..添加到父div：
box-sizing: border-box;
box-sizing: 边框框；
回答by Dillon Burnett
Here is another way to do it.
这是另一种方法。
<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>
Here are some examples on repl.it: https://repl.it/@bryku/LightgrayBleakIntercept
以下是 repl.it 上的一些示例：https://repl.it/@bryku/LightgrayBleakIntercept
回答by Marnix.hoh
If you have a parent container with vertical padding and you want something (e.g. an image) inside that container to ignore its vertical padding you can set a negative, but equal, margin for both 'top' and 'bottom':
如果您有一个带有垂直填充的父容器，并且您希望该容器内的某些内容（例如图像）忽略其垂直填充，则可以为“顶部”和“底部”设置负数但相等的边距：
margin-top: -100px;
margin-bottom: -100px;
The actual value doesn't appear to matter much. Haven't tried this for horizontal paddings.
实际价值似乎并不重要。还没有为水平填充尝试过这个。
