Question

我在flickity（js滑块）

中正在研究这个解决方案

在检查元素时，我想知道为什么它会调整图像周围的div。图像是1900x850。但是，某种程度上浏览器正在将周围的div调整为1903x848？

我试过添加

padding 0 , margin 0, border 0

等所有div。

CSS代码是：

html,
body {
    padding: 0;
    margin: 0;
    height: 100%;
}

div.gallery {
    height: 100%
}

* {
    box-sizing: border-box;
}

.innerG {
    background-image: url('http://lorempixel.com/image_output/animals-q-c-1900-850-2.jpg');
    height: 100%;
}

.gallery-cell {
    height: 100%;
    width: 100%;
    padding: 0;
    margin: 0;
    font-size: 24px;
    background: #EEE;
    margin-right: 10px;
}

HTML代码

<div class="gallery js-flickity" data-flickity-options='{"setGallerySize": false,"cellAlign": "center","imagesLoaded": true,"lazyLoad": 1, "freeScroll": false,  "wrapAround": true,"autoPlay": 6000,"prevNextButtons": true,"contain" : true,"percentPosition": true,"pageDots": true,"selectedAttraction" : 0.1,"friction": 0.6,"rightToLeft": false,"draggable": true}'
 >
  <div class="gallery-cell">
    <div class="innerG">

      <img src="http://lorempixel.com/image_output/animals-q-c-1900-850-2.jpg" />

      asdasdasd
    </div>
  </div>
  <div class="gallery-cell">Lorem ipsum dolor sit</div>
</div>

它只是在调用flickity - http://flickity.metafizzy.co/

来自此网址 - http://flickity.metafizzy.co/flickity.pkgd.js

这个填充或边距是否会导致这种情况？

图像为周围的div添加填充

0 个答案: