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>
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;