边框框不工作，覆盖 div 包括填充

Question

我正在创建一个画廊，其中的图像具有叠加的深色背景和字幕文本。放置没问题，但叠加层 div 超出了图像的边界，因为在容器元素上使用了填充。

我在几个地方读到过它，了解到 border-box 可以解决这个问题，但事实并非如此。我在这里做错了什么吗？查看代码：

HTML:

<div class="dest-item">
 <img src="http://lorempixel.com/500/400">
  <div class="dest-caption">
    <div class="dest-text">
          <h3>This is a caption</h3>
    </div>
  </div>
</div>

CSS:

.dest-item{
    position:relative;
    overflow:hidden;
    z-index:1;
    padding:10px;
  width: 500px;
}

.dest-item img{
    width: 100%;
}

.dest-caption{
    position: absolute;
    top: 0px;
    background: rgba(0,0,0,0.2);
    z-index: 2;
    width: 100%;
    height: 100%;
  box-sizing: border-box;
}

.dest-text{
    position: absolute;
    bottom: 0;
    background: rgba(255,255,255,0.9);
    width: 100%;
    padding: 0px 10px;
}

游乐场link：Code Pen

Answer 1

从整个 dest-item div 中删除填充。你不需要我认为的那个填充：

.dest-item {
  position: relative;
  overflow: hidden;
  z-index: 1;
  /* padding: 10px; */
  width: 500px;
}

Answer 2

不确定这是否正确？

.dest-item{
 position:relative;
 overflow:hidden;
 z-index:0;
 padding:10px;
    width: 500px;
}

.dest-item img{
 width: 100%;
}

.dest-caption{
 position: absolute;
 top: 0;
    left: 0;
 background: rgba(0,0,0,0.2);
 width: 100%;
 height: 100%;
}

.dest-text{
    color: black;
 position: absolute;
    text-shadow: 2px 2px 40px rgba(255,255,255, 1);
 bottom: 0;
    left: 0;
 background: rgba(255,255,255,0.38);
 width: 100%;
    padding: 2px 0px 10px 20px;
}

<div class="dest-item">
   <img src="http://lorempixel.com/500/400">
  <div class="dest-caption">
    <div class="dest-text">
       <h3>This is a caption</h3>
    </div>
  </div>
</div>

Answer 3

试试这个（在这里分叉：http://codepen.io/anon/pen/RNqbjB）

CSS:

/*remove the padding*/
.dest-item{
    position:relative;
    overflow:hidden;
    z-index:1;
    padding:0px;
  width: 500px;
}

HTML:

<!--Add a wrapper and add the padding to that-->
    <div style="padding:10px;">
        <div class="dest-item">
            <img src="http://lorempixel.com/500/400">

            <div class="dest-caption">
                <div class="dest-text">
                  <h3>This is a caption</h3>
                </div>
            </div>
        </div>
    </div>

Answer 4

你不需要边框来做你想做的事。

有 3 种类型的框尺寸：

content-box 是默认行为，仅包括宽度和高度。它不考虑填充或边框宽度。如果您有一个宽度为 500px + 10px padding + 1px border 的元素，则整个元素的显示大小为 522px 宽，实际内容的可用 space 大小为 500px。

padding-box 包含填充但不包含边框。与上面的示例相同，如果您使用的是填充框，则显示大小为 502px，但可用内容 space 为 480px。

border-box 涵盖一切。因此，在我们的示例中，显示大小为 500px，但内容可用 space 为 478px。

在任何情况下，边距都不会计算在尺寸中。

根据您希望最终结果的外观，您将以不同的方式实现这一点，但根据您的代码笔示例，您似乎想要填充整个项目容器，因此叠加层也覆盖了 10px 的填充.您可以在不更改任何框大小的情况下执行此操作。

首先，您需要将 .dest-caption 元素向左偏移 10 像素以解决填充问题。然后需要添加10px的padding，去掉border-box属性。

像这样：

.dest-caption {
    position: absolute;
    top: 0px;
    left: -10px; /* offset */
    background: rgba(0,0,0,0.5);
    z-index: 2;
    width: 100%;
    height: 100%;
    padding: 10px; /* add padding */
}

修复后，您的文本及其框未对齐，并且框的大小无法控制。它受 H3 标签边距的影响。通过删除任何 .dest-text 元素内的 H3 标签的边距来解决此问题：

.dest-text H3 {
    margin: 0px;
}

如果 H3 标签上没有边距，文本叠加层实际上会从可绘制区域中消失，因为它没有对齐。您可以通过将 .dest-text 从底部偏移 .dest-caption 填充宽度 (x2) 来解决此问题。您可能还需要 .dest-text 的顶部和底部填充。

.dest-text {
    position: absolute;
    bottom: 20px; /* account for padding on .dest-caption */
    background: rgba(255,255,255,0.9);
    width: 100%;
    padding: 10px 10px; /* add top/bottom padding */
}

Code Pen Link

边框框不工作，覆盖 div 包括填充

Border-box not working, overlay div is including the padding

html

css

padding

border-box