填充被添加到浮动 div 的底部

Question

您可以看到内边距被添加到这些浮动 div 的底部。每个 div 仅包含一个图像和一个覆盖层。请问如何去掉底部添加的填充？将 padding 和 margin 设置为 0 似乎没有帮助。让 div 显示 inline-block 也不行。

/*  SECTIONS  */

.section {
  clear: both;
  padding: 0px;
  margin: 0px;
}


/*  COLUMN SETUP  */

.col2 {
  display: block;
  float: left;
  margin: 0;
}

/*  GROUPING  */

.group:before,
.group:after {
  content: "";
  display: table;
}

.group:after {
  clear: both;
}

.group {
  zoom: 1;
  /* For IE 6/7 */
}

.span_1_of_8 {
  width: 12.5%;
  position: relative;
  margin-bottom: -4px;
  display: inline-block;
}

.span_1_of_8 img {
  display: inline-block;
}

.overlay {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
  background: linear-gradient(to right, rgba(0, 0, 0, 0.3) 0%, rgba(0, 0, 0, 0) 30%, rgba(0, 0, 0, 0) 100%);
  /*linear-gradient(to right, rgba(0,0,0,.5) 0%, rgba(0,0,0,0) 30%), (rgba(0,0,0,0) 100%)), linear-gradient(to bottom, rgba(0,0,0,.5) 0%, rgba(0,0,0,0) 30%, (rgba(0,0,0,0) 100%));*/
}


/*  GO FULL WIDTH BELOW 480 PIXELS */

@media only screen and (max-width: 480px) {
  .col2 {
    margin: 0%;
  }
  .span_1_of_8,
  .span_2_of_8,
  .span_3_of_8,
  .span_4_of_8,
  .span_5_of_8,
  .span_6_of_8,
  .span_7_of_8,
  .span_8_of_8 {
    width: 100%;
  }
}

.width-100 {
  width: 100%;
}

<div class="section group">
  <div class="col2 span_1_of_8">
    <img src="https://newsinteractive.post-gazette.com/.test/img/SolidarityForChange.jpg" class="width-100" />
    <div class="overlay"></div>
  </div>
  <div class="col2 span_1_of_8">
    <img src="https://newsinteractive.post-gazette.com/.test/img/SolidarityForChange.jpg" class="width-100" />
    <div class="overlay"></div>
  </div>
  <div class="col2 span_1_of_8">
    <img src="https://newsinteractive.post-gazette.com/.test/img/SolidarityForChange.jpg" class="width-100" />
    <div class="overlay"></div>
  </div>
  <div class="col2 span_1_of_8">
    <img src="https://newsinteractive.post-gazette.com/.test/img/SolidarityForChange.jpg" class="width-100" />
    <div class="overlay"></div>
  </div>
  <div class="col2 span_1_of_8">
    <img src="https://newsinteractive.post-gazette.com/.test/img/SolidarityForChange.jpg" class="width-100" />
    <div class="overlay"></div>
  </div>
  <div class="col2 span_1_of_8">
    <img src="https://newsinteractive.post-gazette.com/.test/img/SolidarityForChange.jpg" class="width-100" />
    <div class="overlay"></div>
  </div>
  <div class="col2 span_1_of_8">
    <img src="https://newsinteractive.post-gazette.com/.test/img/SolidarityForChange.jpg" class="width-100" />
    <div class="overlay"></div>
  </div>
  <div class="col2 span_1_of_8">
    <img src="https://newsinteractive.post-gazette.com/.test/img/SolidarityForChange.jpg" class="width-100" />
    <div class="overlay"></div>
  </div>
</div>

https://codepen.io/lschneiderman/pen/dyxZdRQ

Answer 1

它是

y

、

g

、

q

、

p

和

j

等字母的内联下行空间。只需将图像的 CSS 从

display: inline-block

更改为

display: block

。

/*  SECTIONS  */

.section {
  clear: both;
  padding: 0px;
  margin: 0px;
}


/*  COLUMN SETUP  */

.col {
  display: block;
  float: left;
  margin: 1% 0 1% 1.6%;
}

.col2 {
  display: block;
  float: left;
  margin: 0;
}

.col:first-child {
  margin-left: 0;
}


/*  GROUPING  */

.group:before,
.group:after {
  content: "";
  display: table;
}

.group:after {
  clear: both;
}

.group {
  zoom: 1;
  /* For IE 6/7 */
}

.span_1_of_8 {
  width: 12.5%;
  position: relative;
  margin-bottom: -4px;
  display: inline-block;
}

.span_1_of_8 img {
  display: block;
}

.overlay {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
  background: linear-gradient(to right, rgba(0, 0, 0, 0.3) 0%, rgba(0, 0, 0, 0) 30%, rgba(0, 0, 0, 0) 100%);
  /*linear-gradient(to right, rgba(0,0,0,.5) 0%, rgba(0,0,0,0) 30%), (rgba(0,0,0,0) 100%)), linear-gradient(to bottom, rgba(0,0,0,.5) 0%, rgba(0,0,0,0) 30%, (rgba(0,0,0,0) 100%));*/
}


/*  GO FULL WIDTH BELOW 480 PIXELS */

@media only screen and (max-width: 480px) {
  .col2 {
    margin: 0%;
  }
  .span_1_of_8,
  .span_2_of_8,
  .span_3_of_8,
  .span_4_of_8,
  .span_5_of_8,
  .span_6_of_8,
  .span_7_of_8,
  .span_8_of_8 {
    width: 100%;
  }
}

.width-100 {
  width: 100%;
}

<div class="section group">
  <div class="col2 span_1_of_8">
    <img src="https://newsinteractive.post-gazette.com/.test/img/SolidarityForChange.jpg" class="width-100" />
    <div class="overlay"></div>
  </div>
  <div class="col2 span_1_of_8">
    <img src="https://newsinteractive.post-gazette.com/.test/img/SolidarityForChange.jpg" class="width-100" />
    <div class="overlay"></div>
  </div>
  <div class="col2 span_1_of_8">
    <img src="https://newsinteractive.post-gazette.com/.test/img/SolidarityForChange.jpg" class="width-100" />
    <div class="overlay"></div>
  </div>
  <div class="col2 span_1_of_8">
    <img src="https://newsinteractive.post-gazette.com/.test/img/SolidarityForChange.jpg" class="width-100" />
    <div class="overlay"></div>
  </div>
  <div class="col2 span_1_of_8">
    <img src="https://newsinteractive.post-gazette.com/.test/img/SolidarityForChange.jpg" class="width-100" />
    <div class="overlay"></div>
  </div>
  <div class="col2 span_1_of_8">
    <img src="https://newsinteractive.post-gazette.com/.test/img/SolidarityForChange.jpg" class="width-100" />
    <div class="overlay"></div>
  </div>
  <div class="col2 span_1_of_8">
    <img src="https://newsinteractive.post-gazette.com/.test/img/SolidarityForChange.jpg" class="width-100" />
    <div class="overlay"></div>
  </div>
  <div class="col2 span_1_of_8">
    <img src="https://newsinteractive.post-gazette.com/.test/img/SolidarityForChange.jpg" class="width-100" />
    <div class="overlay"></div>
  </div>
</div>

除此之外，你真的应该学习使用 Flexbox 和 CSS-Grid。

float

是一个在流文本中浮动元素的属性，例如报纸中的图像。它不是用于将元素彼此相邻对齐的属性。这是 2012 年之前的过时 hack。