jquery - 当它们被设置为 0 时图像有填充/边距

标签 jquery html css image

我遇到了一个非常烦人的问题。由于某种原因,我 slider 中的图像设置了填充或边距。我应用了 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

谁能说出为什么会有空格?

最佳答案

在您的 jsbin 中,这不是空白,而是您需要使用以下 css 将其删除的白色边框

.bx-wrapper{border: 0}

我更新你的JSBIN看这里

关于jquery - 当它们被设置为 0 时图像有填充/边距,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34617063/

相关文章:

jquery - 有没有办法让 div 中的元素重新排列以适应可用空间?

单击 jQuery 显示 div 但它闪烁并消失

javascript - 声明标记 Javascript Google Maps API

javascript - 当 SVG 用作背景图像时,如何在单击时更改它的填充颜色?

javascript - 如果选中复选框,则显示或隐藏表格行

html - 连续显示图像 (HTML)

html - IE10 中的 HTML <pre> 标签中的空行被删除

jQuery 在 $(html_with_inline_styles) 上丢失样式

css - 无法在移动设备上查看网站的右侧

javascript - 移动和桌面之间的响应式导航调整大小问题