CODEWITHSUNDEEP
htmlcsscss-position
David
David

Reputation: 825

Text with absolute position over image

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

Upvotes: 0

Views: 1450

Answers (4)

frnt
frnt

Reputation: 8795

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>

Upvotes: 1

Frank Groot
Frank Groot

Reputation: 570

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>

Upvotes: 1

athi
athi

Reputation: 1683

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

Upvotes: 1

Super User
Super User

Reputation: 9642

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>

Upvotes: 6

Related Questions