Question

我创建了一个内有4个盒子的div。每个都包含一个悬停覆盖的图像，但由于某种原因，我最终在每个框的底部有一个边距/填充，我无法找出原因。

我甚至尝试过使用inline-block的float intead来实现.showcase-item，但是我所做的一切都不会删除它。有人可以帮忙吗？

HTML：

<div class="showcase">
<div class="showcase-item"><ul class="img-list"><li>
  <img src="https://pbs.twimg.com/profile_images/378800000442759461/b483cdd049f470928e7b20051f95b8cc.jpeg" style="width: 100%"><span class="text-content"><span>Place Name</span></span></li></ul>
</div><div class="showcase-item"><ul class="img-list"><li>
  <img src="http://www.proprofs.com/quiz-school/upload/yuiupload/1756353485.jpg" style="width: 100%"><span class="text-content"><span>Place Name</span></span></li></ul>
</div><div class="showcase-item">
<img src="https://pbs.twimg.com/profile_images/378800000442759461/b483cdd049f470928e7b20051f95b8cc.jpeg" style="width: 100%">
</div><div class="showcase-item">
<img src="http://www.proprofs.com/quiz-school/upload/yuiupload/1756353485.jpg" style="width: 100%">
</div>
</div>

CSS：

.showcase-item {
width: 25%;
background: black;
display: inline-block;
margin: 0;
position:relative;
transition: all 0.5s ease-in-out;
}
ul.img-list {
list-style-type: none;
margin: 0;
padding: 0;
 text-align: center;
}
ul.img-list li {
margin: 0;
}
span.text-content {
background: rgba(0,0,0,0.5);
color: white;
cursor: pointer;
display: table;
height: 100%;
left: 0;
position: absolute;
top: 0; margin: 0;  width: 100%;
}
span.text-content span {
display: table-cell;
text-align: center;
vertical-align: middle;
}
pan.text-content {
background: rgba(0,0,0,0.5);
color: white;
cursor: pointer;
display: table;
height: 100%;
left: 0;
position: absolute;
top: 0;
width: 100%;
opacity: 0;
}
ul.img-list li:hover span.text-content {
opacity: 1;
}
span.text-content {
background: rgba(0,0,0,0.5);
color: white;
cursor: pointer;
display: table;
height: 100%;
left: 0;
position: absolute;
top: 0;
width: 100%;
opacity: 0;
-webkit-transition: opacity 500ms;
-moz-transition: opacity 500ms;
-o-transition: opacity 500ms;
transition: opacity 500ms;
}

小提琴：http://jsfiddle.net/ambersabre/9r7wvnsx/4/

Answer 1

图像存在某种错误。申请img {display: block;}

Answer 2

margin: 0元素的行为就像字母一样：它们会在每个字母之后产生一点差距。因此，我建议您将.showcase-item { margin-left: -5px; }更改为：

{{1}}

http://jsfiddle.net/9r7wvnsx/5/

此外，您可以在此处阅读此问题：https://css-tricks.com/fighting-the-space-between-inline-block-elements/

Answer 3

默认情况下，

<img>是内联元素。这消除了差距：

img{
vertical-align: top;
}

<强> DEMO HERE

Answer 4

试试这个

  .showcase-item {
        width: 25%;
        background: black;
        display: inline-block;
        margin: 0;
        position:relative;
    transition: all 0.5s ease-in-out;
    }
    ul.img-list {
      list-style-type: none;
      margin: 0;
      padding: 0;
      text-align: center;
    }

    ul.img-list li {
      margin: 0;
    }
    span.text-content {
      background: rgba(0,0,0,0.5);
      color: white;
      cursor: pointer;
      display: table;
      height: 100%;
      left: 0;
      position: absolute;
      top: 0; margin: 0;  width: 100%;
    }

    span.text-content span {
      display: table-cell;
      text-align: center;
      vertical-align: middle;
    }

    span.text-content {
      background: rgba(0,0,0,0.5);
      color: white;
      cursor: pointer;
      display: table;
      height: 100%;
      left: 0;
      position: absolute;
      top: 0;
      width: 100%;
      opacity: 0;
    }

    ul.img-list li:hover span.text-content {
      opacity: 1;
    }

    span.text-content {
      background: rgba(0,0,0,0.5);
      color: white;
      cursor: pointer;
      display: table;
      height: 100%;
      left: 0;
      position: absolute;
      top: 0;
      width: 100%;
      opacity: 0;
      -webkit-transition: opacity 500ms;
      -moz-transition: opacity 500ms;
      -o-transition: opacity 500ms;
      transition: opacity 500ms;
    }

    img {
        display:block;
    }

Demo

Answer 5

您也可以尝试从div中删除填充/边距：

<div style="margin-bottom:0; padding-bottom:0"></div>

div中不需要的底部边距/填充

5 个答案: