右边距在宽度100％处断开

Question

我有一个包含图像的DIV和另一个DIV。父DIV设置为position: absolute;，子DIV设置为position: relative。我的想法是在照片上方显示照片标题。

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

[左边距将.photo-caption超出.article-container的边界。右边距似乎没有任何作用。

我也尝试用box-sizing修复此问题。似乎可以将.photo-caption的宽度减小到父级宽度，但是仍然有突出的部分。

Answer 1

Answer 2

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

Answer 3

.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（）浏览器支持here

Answer 4

例如：

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

Answer 5

Answer 6

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

Answer 7

简单答案：请勿尝试使用margin-right。使用'margin-left：xxxpx; '-使xxx足够大，以将div框（Div Style = box）按到所需的正确位置。不需要摆弄琴，可以将它放在您想要的位置。

Answer 8

右边距并不意味着它将向左推动该元素。这意味着它将在右侧产生空间。如果下一个元素将出现，它将在提到的右边距之后出现。在您的情况下，宽度为100％。右边距没有可用空间。

困惑点：1）自动设置宽度时，视觉效果有所不同。在右边会产生相同的边距。但是由于没有width属性，宽度可以自由更改。

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

上述这两个要点将使人产生不同的边际权利印象。

Answer 9