Text with absolute position over image - html

Question

I have an image where I need to add a tag to the right bottom corner.
When I pust it there, it's 4px below the image, no padding nor margin is there.
.postImage {
position: relative;
display: inline-block;
}
.post img.thumbnail {
width:100%;
height: 100%;
}
.commercial {
position: absolute;
bottom: 0;
right: 0;
background-color: #666;
color: #fff;
padding: 3px;
font-size: 14px;
font-weight: 100;
}
<div class="postImage">
<img class="thumbnail" src="https://dummyimage.com/600x400/f00/fff">
<span class="commercial">commercial</span>
</div>
What is the best way to fix it? I don't think
bottom: 4px;
is the right one.
Thank you

Answer 1

By default image tag take some extra space in bottom because it's inline element. Change it to block element to remove extra space
.thumbnail {
display: block; /*inline-block, float:left etc..*/
}
.postImage {
position: relative;
display: inline-block;
}
.post img.thumbnail {
width:100%;
height: 100%;
}
.commercial {
position: absolute;
bottom: 0;
right: 0;
background-color: #666;
color: #fff;
padding: 3px;
font-size: 14px;
font-weight: 100;
}
.thumbnail {
display: block;
}
<div class="postImage">
<img class="thumbnail" src="https://dummyimage.com/600x400/f00/fff">
<span class="commercial">commercial</span>
</div>

Answer 2

.postImage {
position: relative;
display: inline-block;
}
.postImage img.thumbnail {
width: 100%;
height: 100%;
display: block;
}
.commercial {
position: absolute;
bottom: 0;
right: 0;
background-color: #666;
color: #fff;
padding: 3px;
font-size: 14px;
font-weight: 100;
}
<div class="postImage">
<img class="thumbnail" src="https://dummyimage.com/600x400/f00/fff">
<span class="commercial">commercial</span>
</div>

Answer 3

Just add display: block; to thumbnail class.
.postImage {
position: relative;
display: inline-block;
}
.post img.thumbnail {
width:100%;
height: 100%;
}
.commercial {
position: absolute;
bottom: 0;
right: 0;
background-color: #666;
color: #fff;
padding: 3px;
font-size: 14px;
font-weight: 100;
}
.thumbnail {
display: block;
}
<div class="postImage">
<img class="thumbnail" src="https://dummyimage.com/600x400/f00/fff">
<span class="commercial">commercial</span>
</div>

Answer 4

That's true that img default display is inline and by changing to display:block that works, but if you don't want to change display then you can add vertical-align:bottom which aligns element to bottom line of parent div as below, and yes bottom:0 works fine as your .commercial is positioned as absolute.
.postImage {
position: relative;
display: inline-block;
}
.post img.thumbnail {
width:100%;
height: 100%;
}
.commercial {
position: absolute;
bottom: 0;
right: 0;
background-color: #666;
color: #fff;
padding: 3px;
font-size: 14px;
font-weight: 100;
}
img{
vertical-align:bottom;
}
<div class="postImage">
<img class="thumbnail" src="https://dummyimage.com/600x400/f00/fff">
<span class="commercial">commercial</span>
</div>