Html 右边距在宽度 100% 处中断
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/9877379/
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
Margin-right broken on width 100%
提问by Olly F
I have a DIV containing an image and a second DIV. The parent DIV is set to position: absolute;the child DIV is set to position: relative. The idea is that I display my photo caption on top of my image.
我有一个包含图像的 DIV 和第二个 DIV。父 DIV 设置为position: absolute;子 DIV 设置为position: relative。这个想法是我在我的图像顶部显示我的照片标题。
The child DIVshould have 100%width of the parent, minus 10pxon the left, right and bottom, plus a black background.
孩子DIV应该有100%父母的宽度，10px在左边、右边和底部减去，加上黑色背景。
.article-container {
position: relative;
}
.photo-caption {
width: 100%;
background-color: black;
position: absolute;
bottom: 0px;
margin-right: 10px;
margin-left: 10px;
margin-bottom: 10px;
}<div class="span15 article-container">
<img src="images/example-image-1.png" />
<div class="photo-caption">This is the subtitle text on top.</div>
</div>The left margin bumps .photo-captionoutside the bounds of .article-container. The right margin doesn't seem to have any effect.
左边距.photo-caption超出 的边界.article-container。右边距似乎没有任何影响。
I've also tried fixing this with box-sizing. It seems to get the width of .photo-captiondown to the parent width but there's still the overhang.
我也试过用box-sizing. 它似乎将宽度.photo-caption降低到父宽度，但仍然存在悬垂。
采纳答案by Sven Bieder
An absolutely positioned element is positioned with top, left, rightand bottom, not with margin.
绝对定位的元素被定位为top，left，right和bottom，不与margin。
回答by sandeep
It's better if you remove width:100%. write like this:
如果你删除它的更好width:100%。像这样写：
.photo-caption {
left:0;
right:0;
background-color: black;
position: absolute;
bottom: 0px;
margin-right: 10px;
margin-left: 10px;
margin-bottom: 10px;
}
回答by Ali
The problem is that width=100%would give photo-captionexact width of article-container; adding margins (or padding) would not affect width calculation. You can do this yourself using the css calc()so the style become:
问题是这width=100%会给出photo-caption精确的宽度article-container；添加边距（或填充）不会影响宽度计算。您可以使用 css 自己完成此操作，calc()因此样式变为：
.photo-caption {
width: calc(100% - 20px); // 20 = right margin + left margin
background-color: black;
position: absolute;
bottom: 0px;
margin-right: 10px;
margin-left: 10px;
margin-bottom: 10px;
}
Note that you might want to check for calc() browser support here
请注意，您可能需要在此处检查 calc() 浏览器支持
回答by Colin
The problem is that you're setting your width to 100% which gives no room for margins. Instead adjust your width to a percentage less than 100% and then specify your margin as half the percentage of the remaining space.
问题是您将宽度设置为 100%，这没有留出边距的空间。而是将宽度调整为小于 100% 的百分比，然后将边距指定为剩余空间百分比的一半。
For Example:
例如：
style="width:98%; margin-left: 1%;"
回答by Marat Tanalin
Use either paddingin conjunction with box-sizing, or nested block with margins inside your absolutely positioned one without margins.
二者必选其一padding会同box-sizing嵌套块，或与您的无边距绝对定位的一个内部空间。
回答by Wesley Terry
You don't need width:100% if you display block. That might solve all these little issues.
如果显示块，则不需要 width:100%。这可能会解决所有这些小问题。
.photo-caption {
display:block;
background-color: black;
position: absolute;
bottom: 0px;
margin-right: 10px;
margin-left: 10px;
margin-bottom: 10px;
padding:10px
}
回答by Will Morledge
For:
为了：
Simple answer : don't try to use margin-right . Use ' margin-left: xxxpx; ' - make the xxx large enough to push your div box (Div Style= box) right as far as needed. No need for a fiddle, can put it exactly where you want it.
简单的回答：不要尝试使用 margin-right 。使用 ' margin-left: xxxpx; ' - 使 xxx 足够大，以根据需要将 div 框（Div 样式 = 框）推到最右边。不需要小提琴，可以把它放在你想要的地方。
回答by Parshant
Margin is the distance from each side to the neighboring element OR the borders of document.
边距是每边到相邻元素或文档边界的距离。
Margin right didn't means that it will push the element towards left.It means that it will generate space on right side.If next element will come it will come after mentioned margin-right.In your case width is 100%.No space is available for margin-right.
右边距并不意味着它将向左推动元素。这意味着它将在右侧产生空间。如果下一个元素来了，它会在提到的右边距之后出现。在你的情况下，宽度是100%。没有空间可用于边距。
Confusion point: 1) visual effect is different where width is auto.Same margin is generated in right.But due to absence of width property.Width is free to change.
混淆点： 1）width为auto时视觉效果不同。右边产生相同的margin。但由于没有width属性。Width可以自由改变。
2) Same effect when element is floated right.
2) 元素向右浮动时的效果相同。
These 2 above mentioned points will made different image of margin-right in mind.
上面提到的这 2 点将在脑海中形成不同的 margin-right 形象。
