Text with absolute position over image

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

You could also use <figure> for the wrapper and <figcaption> for the caption as they are used for exactly this purpose. — MateBoy
– MateBoy, Commented May 4, 2017 at 8:55

Super User · Accepted Answer · 2017-05-04 08:52:42Z

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>

athi · Accepted Answer · 2017-05-04 08:55:37Z

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

Frank Groot · Accepted Answer · 2017-05-04 08:56:22Z

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>

frnt · Accepted Answer · 2017-05-04 09:00:35Z

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>

Collectives™ on Stack Overflow

Text with absolute position over image

4 Answers 4

Comments

Comments

1 Comment

Comments

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

1 Comment

Comments

Related