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

Question

I'm creating a gallery with images having an overlay dark background and caption text. The placement is alright but the overlay div is falling out of the bounds of the image because a padding is used on the container element.
I read about it at several places and learned that border-box could solve this problem but it isn't. Am I doing something wrong here? Check out the code:
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;
}
Playground link: Code Pen

Answer 1

Try this (fork here: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

Remove the padding from whole dest-item div. you don't need that padding over there as I think:
.dest-item {
position: relative;
overflow: hidden;
z-index: 1;
/* padding: 10px; */
width: 500px;
}

Answer 3

Not sure if this is along the right lines?
.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

You don't need border-box to do what you want.
There are 3 types of box-sizing:
content-box is the default behavior and only includes the width and height. It does not account for padding or border width. If you have an element with 500px width + 10px padding + 1px border then the display size of the whole element is 522px wide and the size of the available space for actual content is 500px.
padding-box includes the padding but not the border. Same example as above, if you are using padding-box then the display size is 502px but the available content space is 480px.
border-box covers everything. So in our example, the display size is 500px but available space for content is 478px.
Margins are never counted in the size, in any case.
Depending on how you want the end result to look, then you will achieve this differently but based on your Code Pen sample, it looks like you want to fill the entire item container so the overlay cover the 10px padding as well. You can do this without changing the box-sizing for anything.
First, you need to offset your .dest-caption element to the left by 10px to account for the padding. Then you need to add 10px padding and remove the border-box attribute.
Like this:
.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 */
}
With that fixed, your text and its box is misaligned and the size of the box is not well-controlled. It is affected by the margin of the H3 tag. Fix this by removing the margins from the H3 tag inside of any .dest-text elements:
.dest-text H3 {
margin: 0px;
}
Without the margins on the H3 tag, the text overlay actually disappears out of the drawable area because it's misaligned. You can fix this by offsetting .dest-text from the bottom by the .dest-caption padding width (x2). You will probably also want top and bottom padding for .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