Не удается удалить отступы на изображении

Я пытаюсь сделать простой 3-элементный div, который покажет список оценок для сигар. Я хочу, чтобы левая ячейка была квадратным изображением сигары, середина - именем, а право - рейтингом. Код работает нормально до тех пор, пока я не добавлю изображение - тогда кажется, что он добавляет 8-пиксельную рамку внизу изображения, показывая цвет фона ячейки. Использование Wordpress (если это помогает). Любая помощь приветствуется!

Это страница: 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;
}
Источник

4 ответа

Решение

Добавлять line-height: 0; в .cigarImage и ты избавишься от этого. Многие люди скажут вам использовать display: block; и это будет работать, но это не настоящая проблема. Проблема в том, что img теги встроены, и вы получаете это пространство, потому что вы получаете изображение плюс высоту строки, которая находится в этом контейнере, и это создает пространство, которое вы видите под вашим изображением. Правильное решение - добавить то, что я только что сказал вам.

Так что отредактируйте ваш класс так:

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

И вы получите это работает правильно:)

Источник

В вашем классе ratingWrapTopRated установите значение line-height равным 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*/
}
Источник

Это потому, что изображения inline (то есть они обрабатываются так, как будто они находятся в строке текста) по умолчанию, и их нижняя часть выравнивается по "базовой линии" строки текста, а не по абсолютному дну. Ниже изображения вы получаете пространство от остальной части строки ниже базовой линии. Если вы просто установите изображение на display: block; он должен избавиться от него (тогда он не будет считаться частью строки текста, а вместо этого будет отдельным блоком).

Источник

Просто добавьте отступ справа от 5px или около того на класс.cigarImage. Вам также следует увеличить высоту изображения или уменьшить высоту информационной панели рядом с изображениями, поскольку они не совпадают.

Источник
Другие вопросы по тегам