CODEWITHSUNDEEP
htmlcsswordpresspaddingcellpadding
jordanG
jordanG

Reputation: 59

Can't remove padding on an image

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;
}

Upvotes: 0

Views: 5019

Answers (4)

Greenonion
Greenonion

Reputation: 87

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*/
}

Upvotes: 0

Carlos Calla
Carlos Calla

Reputation: 6716

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 :)

Upvotes: 7

GifCo
GifCo

Reputation: 1373

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.

Upvotes: 0

crimson_penguin
crimson_penguin

Reputation: 2778

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

Upvotes: 0

Related Questions