Рамка не работает, 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;
}

Ссылка для детской площадки: Code Pen

Answer 1

Попробуйте это (разветвите здесь: 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 2

Удалить обивка от целого dest-item дела. Тебе не нужен этот отступ там, как я думаю:

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

Answer 3

Не уверен, что это правильно?

.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 4

Вам не нужно границу, чтобы делать то, что вы хотите.

Существует 3 типа размеров коробки:

content-box является поведением по умолчанию и включает только ширину и высоту. Он не учитывает отступы или ширину границы. Если у вас есть элемент с шириной 500px + отступы 10px + граница 1px, то размер дисплея всего элемента будет 522px в ширину, а размер доступного пространства для реального контента - 500px.

Поле padding включает отступ, но не границу. Тот же пример, что и выше, если вы используете padding-box, тогда размер дисплея составляет 502px, а доступное пространство содержимого - 480px.

бордюр покрывает все. Таким образом, в нашем примере размер экрана составляет 500 пикселей, а доступное пространство для содержимого - 478 пикселей.

В любом случае поля не учитываются по размеру.

В зависимости от того, как вы хотите, чтобы конечный результат выглядел, тогда вы достигнете этого по-разному, но на основе вашего образца Code Pen, похоже, что вы хотите заполнить весь контейнер элементов, чтобы наложение также покрывало отступ в 10 пикселей. Вы можете сделать это, не меняя размер окна ни для чего.

Во-первых, вам нужно сместить ваш элемент.dest-caption влево на 10 пикселей, чтобы учесть отступы. Затем вам нужно добавить отступы 10px и удалить атрибут 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. Исправьте это, удалив поля из тега H3 внутри любых элементов.dest-text:

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

Код Pen Ссылка