Question

我正在尝试制作一个简单的3格div，它会显示雪茄评级列表。我希望左边的单元格是雪茄的正方形图像，中间是名称，右边是评级。代码工作正常，直到我添加图像 - 它似乎在图像的底部添加一个8px边框，显示单元格的背景颜色。使用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;
}

Answer 1

将line-height: 0;添加到.cigarImage，您将摆脱它。许多人会告诉你使用display: block;，这将有效，但这不是真正的问题。问题是img标记是内联的，并且您获得了该空间，因为您获得了图像加上该容器中的行高，并创建了您在图像下方看到的空间。正确的解决方案是添加我刚刚告诉你的内容。

所以编辑你的课程：

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

你会得到正确的工作：）

Answer 2

这是因为默认情况下图像是inline（也就是说，它们被视为在文本行上），并且它们的底部与行的“基线”对齐文字，而不是绝对的底部。在图像下方，您可以从基线下方的其余部分获得空间。如果你只是将图像设置为display: block;它应该摆脱它（那么它不会被视为文本行的一部分，而是它自己的块）。

Answer 3

只需在.cigarImage类中添加5px左右的填充权限即可。您还应该增加图像高度或者设置图像旁边信息栏的高度，因为它们不对齐。

Answer 4

在你的class 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*/
}

无法删除图片上的填充

4 个答案: