blocks|key|864106|text|简单的修复，只需做|type|unstyled|depth|inlineStyleRanges|entityRanges|data|864107|margin:-10px|code-block|syntax|javascript|864108|在人力资源部。|864109|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|L|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|M|8|@]|9|@]|A|$]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

Easy fix, just do 

<pre><code>margin:-10px
</code></pre>

on the hr.

blocks|key|1079002|text|对于图像目的，您可以这样做|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1079003|img+{
++++width:+calc(100%25+%2B+20px);+//+twice+the+value+of+the+parent's+padding
++++margin-left:+-10px;+//+-1+*+parent's+padding
}|code-block|syntax|javascript|1079004|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

For image purpose you can do something like this

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

blocks|key|864334|text|大体上每个人都回答了这个问题，但只有很小一部分人回答了这个问题。我刚处理过这件事。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|864335|我想在面板的底部有一个按钮托盘，面板周围有30px。纽扣托盘的底部和侧面必须齐平。|864336|.panel
{
++padding:+30px;
}

.panel+>+.actions
{
++margin:+-30px;
++margin-top:+30px;
++padding:+30px;
++width:+auto;
}|code-block|syntax|javascript|864337|我用更多的肉体做了一个演示here来驱动这个想法。但是，上面的关键元素会偏移子级上具有匹配负边距的任何父级填充。然后最关键的是，如果你想要运行子进程的全宽，那么将width设置为auto。(正如schlingel在上面的评论中提到的)。|offset|length|864338|entityMap|0|LINK|mutability|MUTABLE|url|http://codepen.io/anon/pen/EVYryR|1|https://stackoverflow.com/users/745127/schlingel^0|0|0|0|D|4|0|2P|9|1|0^^$0|@$1|2|3|4|5|6|7|W|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|X|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|Y|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|Z|8|@]|9|@$K|10|L|11|1|12]|$K|13|L|14|1|15]]|A|$]]|$1|M|3|-4|5|6|7|16|8|@]|9|@]|A|$]]]|N|$O|$5|P|Q|R|A|$S|T]]|U|$5|P|Q|R|A|$S|V]]]]

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. 

<pre><code>.panel
{
 padding: 30px;
}

.panel &gt; .actions
{
 margin: -30px;
 margin-top: 30px;
 padding: 30px;
 width: auto;
}
</code></pre>

I did a demo <a href="http://codepen.io/anon/pen/EVYryR" rel="noreferrer">here</a> with 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 <a href="https://stackoverflow.com/users/745127/schlingel">schlingel</a>).

blocks|key|864229|text|有点像late.But，只是需要一点数学知识。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|864230|.content+{
++margin-top:+50px;
++background:+#777;
++padding:+30px;
++padding-bottom:+0;
++font-size:+11px;
++border:+1px+dotted+#222;
}

.bottom-content+{
++background:+#999;
++width:+100%25;+/*+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'>

++A+paragraph
++Another+paragraph.
++No+more+content


++<div+class='bottom-content'>
++++++I+want+this+div+to+ignore+padding.
++</div>|code-block|syntax|javascript|864231|我没有Windows，所以我没有在IE中测试它。|864232|小提琴：fiddle+example..|offset|length|864233|entityMap|0|LINK|mutability|MUTABLE|url|http://jsfiddle.net/xtzGy/^0|0|0|0|4|G|0|0^^$0|@$1|2|3|4|5|6|7|U|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|V|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|W|8|@]|9|@]|A|$]]|$1|I|3|J|5|6|7|X|8|@]|9|@$K|Y|L|Z|1|10]]|A|$]]|$1|M|3|-4|5|6|7|11|8|@]|9|@]|A|$]]]|N|$O|$5|P|Q|R|A|$S|T]]]]

Kinda late.But it just takes a bit of math.

<pre><code>.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 */
}

&lt;div class='content'&gt;

 &lt;p&gt;A paragraph&lt;/p&gt;
 &lt;p&gt;Another paragraph.&lt;/p&gt;
 &lt;p&gt;No more content&lt;/p&gt;


 &lt;div class='bottom-content'&gt;
 I want this div to ignore padding.
 &lt;/div&gt;
</code></pre>

I don't have Windows so I didn't test this in IE.

fiddle:
<a href="http://jsfiddle.net/xtzGy/" rel="noreferrer">fiddle example..</a>

blocks|key|1079180|text|如果您有一个具有垂直填充的父容器，并且您希望该容器中的某些内容(例如图像)忽略其垂直填充，您可以为'top‘和’bottom‘设置一个负值但相等的边距：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1079181|margin-top:+-100px;
margin-bottom:+-100px;|code-block|syntax|javascript|1079182|实际的值似乎并不重要。我还没有尝试过水平填充。|1079183|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|L|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|M|8|@]|9|@]|A|$]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

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

<pre><code>margin-top: -100px;
margin-bottom: -100px;
</code></pre>

The actual value doesn't appear to matter much. Haven't tried this for horizontal paddings.

blocks|key|1079214|text|另一种解决方案：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1079215|position:+absolute;
top:+0;
left:+0;|code-block|syntax|javascript|1079216|只需将顶部/右侧/底部/左侧改为您的大小写即可。|1079217|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|L|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|M|8|@]|9|@]|A|$]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

Another solution:
<pre><code>position: absolute;
top: 0;
left: 0;
</code></pre>
just change the top/right/bottom/left to your case.

blocks|key|1078883|text|margin:+0+-10px;+|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|1078884|比|unstyled|1078885|margin:+-10px;|1078886|后者垂直地将内容吸进其中。|1078887|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@]|A|$B|C]]|$1|D|3|E|5|F|7|N|8|@]|9|@]|A|$]]|$1|G|3|H|5|6|7|O|8|@]|9|@]|A|$B|C]]|$1|I|3|J|5|F|7|P|8|@]|9|@]|A|$]]|$1|K|3|-4|5|F|7|Q|8|@]|9|@]|A|$]]]|L|$]]

<pre><code>margin: 0 -10px; 
</code></pre>

is better than

<pre><code>margin: -10px;
</code></pre>

The later sucks content vertically into it.

blocks|key|1078807|text|你的双亲的宽度是120px+--也就是每边宽100+%2B+20填充，所以你需要让你的线条宽120px。这是代码。下一次请注意，填充加起来等于元素宽度。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1078808|#parent
{
++++width:+100px;
++++padding:+10px;
++++background-color:+Red;
}

hr
{
++++width:+120px;
++++margin:0+-10px;
++++position:relative;
}|code-block|syntax|javascript|1078809|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

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.

<pre><code>#parent
{
 width: 100px;
 padding: 10px;
 background-color: Red;
}

hr
{
 width: 120px;
 margin:0 -10px;
 position:relative;
}
</code></pre>

blocks|key|1078759|text|问题可能归结为您使用的是哪种机型。你在使用IE吗？|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1078760|当IE处于quirks模式时，width是框的外部宽度，这意味着填充将在内部。所以盒子里面剩下的总面积是100px+-+2+*+10px+=+80px，在这种情况下，你的100px宽的<hr>看起来不会向右。|offset|length|style|CODE|1078761|如果你在标准模式下，width是你盒子的内部宽度，填充是在外面添加的。所以盒子的总宽度是100px+%2B+2+*+10px+=+120px，在盒子里面给你的<hr>留出恰好100px。|1078762|要解决此问题，请调整IE的CSS值。(检查Firefox，看看它在那里看起来是否正常)。或者更好的是，设置一个文档类型，使浏览器进入严格模式--+IE也遵循标准的框模型。|1078763|<!DOCTYPE+HTML+PUBLIC+"-//W3C//DTD+HTML+4.01//EN"
++++++++"http://www.w3.org/TR/html4/strict.dtd">
<html>
+...|code-block|syntax|javascript|1078764|http://www.quirksmode.org/css/quirksmode.html|1078765|entityMap|0|LINK|mutability|MUTABLE|url^0|0|F|5|1G|N|2K|4|0|A|5|18|O|25|4|0|0|0|0|19|0|0^^$0|@$1|2|3|4|5|6|7|Z|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|10|8|@$D|11|E|12|F|G]|$D|13|E|14|F|G]|$D|15|E|16|F|G]]|9|@]|A|$]]|$1|H|3|I|5|6|7|17|8|@$D|18|E|19|F|G]|$D|1A|E|1B|F|G]|$D|1C|E|1D|F|G]]|9|@]|A|$]]|$1|J|3|K|5|6|7|1E|8|@]|9|@]|A|$]]|$1|L|3|M|5|N|7|1F|8|@]|9|@]|A|$O|P]]|$1|Q|3|R|5|6|7|1G|8|@]|9|@$D|1H|E|1I|1|1J]]|A|$]]|$1|S|3|-4|5|6|7|1K|8|@]|9|@]|A|$]]]|T|$U|$5|V|W|X|A|$Y|R]]]]

The problem could come down to which box model you're using. Are you using IE?

When IE is in quirks mode, <code>width</code> is the outer width of your box, which means the padding will be inside. So the total area left inside the box is <code>100px - 2 * 10px = 80px</code> in which case your 100px wide <code>&lt;hr&gt;</code> will not look right.

If you're in standards mode, <code>width</code> is the inner width of your box, and padding is added outside. So the total width of the box is <code>100px + 2 * 10px = 120px</code> leaving exactly 100px inside the box for your <code>&lt;hr&gt;</code>.

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.

<pre><code>&lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
 "http://www.w3.org/TR/html4/strict.dtd"&gt;
&lt;html&gt;
 ...
</code></pre>

<a href="http://www.quirksmode.org/css/quirksmode.html" rel="nofollow">http://www.quirksmode.org/css/quirksmode.html</a>

blocks|key|864503|text|这是另一种方法。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|864504|<style>
++++.padded-element{margin:+0px;+padding:+10px;}
++++.padded-element+img{margin-left:+-10px;+width:+calc(100%25+%2B+10px+%2B+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">
|code-block|syntax|javascript|864505|这里有一些关于repl.it的例子：https://repl.it/@bryku/LightgrayBleakIntercept|offset|length|864506|entityMap|0|LINK|mutability|MUTABLE|url|https://repl.it/@bryku/LightgrayBleakIntercept^0|0|0|I|1A|0|0^^$0|@$1|2|3|4|5|6|7|S|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|T|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|U|8|@]|9|@$I|V|J|W|1|X]]|A|$]]|$1|K|3|-4|5|6|7|Y|8|@]|9|@]|A|$]]]|L|$M|$5|N|O|P|A|$Q|R]]]]

Here is another way to do it.

<pre><code>&lt;style&gt;
 .padded-element{margin: 0px; padding: 10px;}
 .padded-element img{margin-left: -10px; width: calc(100% + 10px + 10px);}
&lt;/style&gt;
&lt;p class="padded-element"&gt;
 &lt;img src="https://images.pexels.com/photos/3014019/pexels-photo-3014019.jpeg?auto=compress&amp;cs=tinysrgb&amp;dpr=2&amp;h=650&amp;w=940"&gt;
&lt;/p&gt;
</code></pre>

Here are some examples on repl.it: <a href="https://repl.it/@bryku/LightgrayBleakIntercept" rel="nofollow noreferrer">https://repl.it/@bryku/LightgrayBleakIntercept</a>

blocks|key|864658|text|如果你想让hr从屏幕的左边直接转到右边，这是用来确保视图宽度不受影响的代码。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|864659|hr+{
position:+absolute;
left:+0;
right:+0;
}|code-block|syntax|javascript|864660|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

If your after a way for the hr to go straight from the left side of a screen to the right this is the code to use to ensure the view width isn't effected.
<pre><code>hr {
position: absolute;
left: 0;
right: 0;
}
</code></pre>

blocks|key|1079056|text|简单的修复..添加到父div：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1079057|框大小:边框大小；|1079058|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|F|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|G|8|@]|9|@]|A|$]]|$1|D|3|-4|5|6|7|H|8|@]|9|@]|A|$]]]|E|$]]

easy fix.. add to parent div:

box-sizing: border-box;

I'm trying to get my horizontal rule to ignore the parent padding.

Here's a simple example of what I have:

<pre class="lang-css prettyprint-override"><code>#parent {
 padding:10px;
 width:100px;
}
hr {
 width:100px;
}
</code></pre>

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.

I'm aware that I could make a separate div for everything else; this is not the solution I'm looking for.

Ignore parent padding

Windows

容器

我正在尝试让我的水平线忽略父填充。下面是我所拥有的一个简单的例子：#parent {  padding:10px;  width:100px;}hr {  width:100px;}你会发现水平线从父级延伸了10px。我试图让它忽略父div中的其他所有内容所需要的填充。我知道我可以为其他所有东西创建一个单独的div；这不是我正在寻找的解决方案。

问忽略父填充
EN

回答 12

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问忽略父填充EN

回答 12

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问忽略父填充
EN