Html 宽度为100%的边距右断开

我有一个包含图像和第二个DIV的DIV。父DIV设置为

position:absolute

子DIV设置为

位置：相对
。我的想法是在图片上方显示我的照片标题

子项
DIV
应该具有父项的
100%
宽度，在左、右和底部减去
10px
，加上黑色背景


.article容器{
位置：相对位置；
}
.图片说明{
宽度：100%；
背景色：黑色；
位置：绝对位置；
底部：0px；
右边距：10px；
左边距：10px；
边缘底部：10px；
}

这是顶部的字幕文本。
如果删除
宽度：100%
会更好。这样写：

.photo-caption  {
            left:0;
            right:0;
            background-color: black;
            position: absolute;
            bottom: 0px;
            margin-right: 10px;
            margin-left: 10px;
            margin-bottom: 10px;
            }

绝对定位的元素是使用
顶部
，
左侧
，
右侧
和
底部
定位的，而不是使用
边距
，将
填充
与
框大小调整
结合使用，或者在绝对定位的块中有边距的嵌套块，但没有边距。
如果显示块，则不需要100%的宽度。这可能会解决所有这些小问题

.photo-caption  {
        display:block;
        background-color: black;
        position: absolute;
        bottom: 0px;
        margin-right: 10px;
        margin-left: 10px;
        margin-bottom: 10px;
        padding:10px
        }

问题是
width=100%
会给出
图片标题
文章容器的确切宽度
；添加边距（或填充）不会影响宽度计算。您可以使用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;
}

请注意，您可能需要检查calc（）浏览器是否支持：
答案很简单：不要试图正确使用保证金。使用“左边距：xxxpx；”-使xxx足够大，以便根据需要将您的div-box（div-Style=box）向右推。不需要小提琴，你可以把它放在你想要的地方。
问题是你把宽度设置为100%，这样就没有留边距的余地了。相反，将宽度调整为小于100%的百分比，然后将边距指定为剩余空间百分比的一半

例如：

style="width:98%; margin-left: 1%;"

边距是从每一侧到相邻元素或文档边框的距离

右边距并不意味着它将把元素推向左边。它意味着它将在右边生成空间。如果下一个元素将出现，它将出现在提到的右边距之后。在您的情况下，宽度是100%。右边距没有空间可用

混淆点：
1） “宽度”为“自动”时的视觉效果不同。右侧生成相同的边距。但由于缺少“宽度”属性。宽度可以自由更改

2） 当元素向右浮动时，效果相同

这两个以上提到的点将使不同的图像边缘的权利
 顺便说一下，我想我可以使用
.photo caption
的容器并设置左/右填充（而不是边距）来解决这个问题。然而，这似乎不是一个干净的解决方案。标题应该隐藏图像的底部吗？如果你提供一个图像或更好地描述你想要的内容，那么会更容易帮助。这里有一个图像来显示我想做的事情：但你想在顶部显示标题吗？同意，我明白了。然而，我仍然需要修正右边的边距。这里有一张图片显示了我想做的事情：I.imgur.com/fqEc7.pngAbout你在说什么？对于照片标题或物品容器？照片标题也应按左、右、下三个方向定位。那么你也不再需要100%的宽度了。这在目前看来似乎没有什么意义，因为你的照片标题在当时的宽度是100%+20px。你解决了它！因此，总而言之，元素需要显式定位，而不是使用边距。宽度100%可以删除，元素不需要框大小。我是否遗漏了什么？我也在测试，如果你不在内部div上加一个宽度，它将和它的内容一样宽，而不是周围的div。@MrLister谢谢你指出这个问题，因为我没有看到位置：绝对。现在检查我更新的anwserYep，Lister，你说得对。我需要照片标题的背景是100%的宽度，左/右侧减去10个像素。Sandeep，Lister，谢谢。我认为您的更新解决方案也会起作用。然而，我已经将Sven标记为已解决（我首先阅读了它，它使用的代码行稍微少一些！）。这是正确的答案！只需注意，如果家长是一个灵活的盒子，这是不必要的（也不会起作用）。小提琴会非常有用，特别是当问题比答案的提示更具体时。谢谢<代码>宽度：计算（100%-20px）方法完全按照我的需要工作！
width: -webkit-fill-available;