Question

我遇到了一个非常烦人的问题。我的滑块中的图像由于某种原因设置了填充或边距。我已经应用了0个边距和填充，并添加了position: absolute;和top: 0;，这没有任何帮助摆脱这个空白。

<div class="slider">
     <div class="slide"><img src="http://realtorcatch.com/images/subway2.jpg">
     <span>My Text for "FooBar1"!</span></div>
     <div class="slide"><img src="http://realtorcatch.com/images/beach2.jpg">
     <span>My Text for "FooBar2"!</span></div>
     <div class="slide"><img src="http://realtorcatch.com/images/space2.jpg">
     <span>My Text for "FooBar3"!</span></div>
  </div>
* {
    padding: 0;
    margin: 0;
}
.slider {margin: 0; padding: 0; position: absolute; top: 0;}
.slide {position: absolute; margin: 0; padding: 0;}
.slide img {display: block; max-width: 100%;}
.slide span {position: absolute; left: 0; top: 50%; text-align: center; width: 100%; font-size: 2em; color: white;}
.bx-controls.bx-has-controls-direction.bx-has-pager {margin-top: -50px;}

你可以在这里看到一个真实的例子：

http://jsbin.com/gizebukisi/edit?html,css,js,output

有人可以说出为什么会有空格吗？

Answer 1

在你的jsbin中这不是一个白色空间这个白色边框你需要用下面的css删除它

.bx-wrapper{border: 0}

我更新了您的JSBIN，请点击此处

设置为0时，图像具有填充/边距

1 个答案: