CODEWITHSUNDEEP
htmlcss
mary ongubo
mary ongubo

Reputation: 85

CSS How to remove extra space created by reducing image size using CSS

I am using this function get_the_post_thumbnail_url() to pull the featured image of a post. I don't want to use the WordPress predefined image sizes which leads to using CSS. I specified the width of 40px but I noticed this pushes the text to the right. The image itself resizes perfectly but it appears the image width still remains the same which creates the space between the image and the text.

Here is the image:

enter image description here

Some CSS fix?

Thanks.

Upvotes: 0

Views: 653

Answers (3)

Kaveesh Iyer
Kaveesh Iyer

Reputation: 11

Add this piece of code along with it to fill the image fully :

<div class="container"></div>

.container {
  width: 40px;
  height: 40px;
  background-image: url("your image");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: 50% 50%;
}

Upvotes: 1

mahmoud abd allah
mahmoud abd allah

Reputation: 31

you may add this style to the image tag and it must remove the extra space

margin-right: 5px !important;

Upvotes: 0

Ahmad Dalao
Ahmad Dalao

Reputation: 2056

Well we don't not have a code to work with. So just try to use on the container display: inline-block; or display: inline; lastly display: inline-flex;

choose one of these although they might all look the same, but they are not.

And the space will be removed since the container will wrap over the content inside of it.

Upvotes: 1

Related Questions