Can't remove padding on an image

Question

I'm trying to make a simple 3-cell div that will show a list of ratings for cigars. I want the left cell to be a square image of the cigar, the middle to be the name, and the right to be the rating. The code works fine until I add the image - it then seems to add an 8px border on the bottom of the image, revealing the cell's background color. Using Wordpress (if that helps). Any help is appreciated!

This is the page: http://cigardojo.com/best-cigars/

HTML

<div class="ratingWrapTopRated">
<div class="cigarImage"><img src="http://cigardojo.com/wp-content/uploads/2014/08/cigar-test.jpg" alt="test" width="90" height="90" class="alignnone size-full wp-image-14045" /></div>
<div class="cigarName">Opus XXX Power Ranger</div>
<div class="numericalScoreTopCigars"></div>
</div>

CSS

.ratingWrapTopRated {
background:#fff;
width:600px !important;
height: 90px !important;
margin: 0 auto;
display:table;
font-family:Helvetica, Arial, sans-serif;
margin-bottom: 10px;
}

.cigarImage {
background:#fff; color:#fff;
display:table-cell;
width: 90px;
}

.cigarName {
background:#ff5100; color:#fff; text-align:center;
display:table-cell;
vertical-align:middle;
text-transform: uppercase;
}

.numericalScoreTopCigars {
background:#000; color:#fff; text-align:center;
width:25%;
display:table-cell;
vertical-align:middle;
font-weight:bold;
border-left: 4px solid; border-color: #fff;
}

what page is this happening on it looks fine to me. – GifCo Aug 22 '14 at 16:56 — GifCo, Aug 22 '14 at 16:56

score 5 · Accepted Answer · answered Aug 22 '14 at 17:05

5

Add line-height: 0; to .cigarImage and you will get rid of it. Many people will tell you to use display: block; and that will work but that is not the real problem. The problem is that img tags are inline and you get that space because you get the image plus the line-height it is in that container, and that creates the space you see below your image. The correct solution to that is to add what I just told you.

So edit your class like this:

.cigarImage {
    background:#fff; color:#fff;
    display:table-cell;
    line-height: 0; /* Here is the solution */
    width: 90px;
}

And you will get that working right :)

answered Aug 22 '14 at 17:05

Carlos Calla

6,556
2
16
23

Why is that the "correct" solution? That works too, but what makes it more correct? I would argue that the image in this case is its own block and shouldn't have anything to do with line heights. – crimson_penguin Aug 22 '14 at 17:27
What I mean is that you keep the natural display value of img tag, and the problem is solved without changing this to block. I said both will solve the problem, some people change display: block just because they don't know why is that space appearing there, and with display block it disappears, but if you are aware why that space is appearing then you should't have to change its original display value to solve it. – Carlos Calla Aug 22 '14 at 17:34
1

Fair enough. Personally I think you should understand the cause either way, but I think setting `line-height` is about as much of a hack as changing the `display` value. Both will be disastrous if it's in a line of text. Also, I haven't tried it, but `vertical-align: bottom` should work too, and would be less of a hack in my opinion if so. – crimson_penguin Aug 22 '14 at 17:49
I tested, and `vertical-align: bottom` on the `img` does work as well. – crimson_penguin Aug 22 '14 at 17:54
It should work as long as the img's height is greater than the line-height of the container .cigarImage, in this case the image is a lot greater than the line-height that should probably be aprox 16px so he should never experience some trouble. Remember that the line-height is still there making some space, the image just changed its vertical-align to bottom so it overlaps and nobody will notice. If the img's height, i.e. was 10px, the problem will persist. – Carlos Calla Aug 22 '14 at 18:22
1

That is true. But that gets back to why I prefer `display: block;`. I mean, obviously in this case you don't actually want a line at all, so why not just get rid of it, rather than making it zero-height? – crimson_penguin Aug 22 '14 at 18:49
As I just said, both ways will work. I just didn't change the natural display value of the img tag. I like to keep natural display values of tags unless needed to be changed in order to deal with the situation. By the way, I guess jordanG won't come back to mark the answer as correct haha, it's been a while. – Carlos Calla Aug 22 '14 at 20:49

score 0 · Answer 2 · answered Aug 22 '14 at 16:56

This is because images are inline (that is, they're treated like they're on a line of text) by default, and the bottom of them is aligned to the "baseline" of the line of text, not the absolute bottom. Below the image you get the space from the rest of the line below the baseline. If you just set the image to display: block; it should get rid of it (then it won't be considered part of a line of text, and will instead be its own block).

score 0 · Answer 3 · answered Aug 22 '14 at 17:00

0

Just add a padding right of 5px or so on the .cigarImage class. You should also increase your image height or decrees the height of the info bar next to your images as they dont line up.

answered Aug 22 '14 at 17:00

GifCo

1,350
7
13

score 0 · Answer 4 · answered Aug 22 '14 at 17:06

In your class ratingWrapTopRated class set line-height to 0:

.ratingWrapTopRated {
    background:#fff;
    width:600px !important;
    height: 90px !important;
    margin: 0;
    display:table;
    font-family:Helvetica, Arial, sans-serif;
    padding-bottom: -8px;
    margin-bottom: 10px;
    line-height: 0; /*here*/
}

Can't remove padding on an image

4 Answers4