htmlcssimage

padding being added to bottom of floated div

You can see that padding is being added to the bottom of these floated divs. Each div contains just an image and an overlay. How can I get rid of that added padding at the bottom please? Setting padding and margin to 0 doesn't seem to help. Neither does making the div display 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

Solution

  • It is the inline descender space for letters like y, g, q, p, and j. Simply change the CSS for the images from display: inline-block to display: block.

    .section {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
}

.span_1_of_8 {
  position: relative;
  img {
    display: block;
    width: 100%;
  }
}

@media only screen and (max-width: 480px) {
  .span_1_of_8 {
    grid-column: span 8;
  }
}

.overlay {
  position: absolute;
  inset: 0;
  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%));*/
}
    <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>

    Besides that, you should really learn to use Flexbox and CSS-Grid. float is a property to float an element within flowtext such as images in the newspaper. it is not a property to be used to align elements next to each other. it is an outdated hack from pre-2012.
    That would also shorten your code by 90%...

    left: 0;
top: 0;
width: 100%;
height: 100%;

    can be shortened to:

    inset: 0;