Image Inside Div Has Extra Space Below the Image

Image inside div has extra space below the image

By default, an image is rendered inline, like a letter so it sits on the same line that a, b, c and d sit on.

There is space below that line for the descenders you find on letters like g, j, p and q.

Demonstration of descenders

You can:

  • adjust the vertical-align of the image to position it elsewhere (e.g. the middle) or
  • change the display so it isn't inline.

div {  border: solid black 1px;  margin-bottom: 10px;}
#align-middle img { vertical-align: middle;}
#align-base img { vertical-align: bottom;}
#display img { display: block;}
<div id="default"><h1>Default</h1>  The quick brown fox jumps over the lazy dog <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/f/f2/VangoghStarry-night2.jpg/300px-VangoghStarry-night2.jpg" alt=""></div>
<div id="align-middle"><h1>vertical-align: middle</h1> The quick brown fox jumps over the lazy dog <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/f/f2/VangoghStarry-night2.jpg/300px-VangoghStarry-night2.jpg" alt=""> </div> <div id="align-base"><h1>vertical-align: bottom</h1> The quick brown fox jumps over the lazy dog <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/f/f2/VangoghStarry-night2.jpg/300px-VangoghStarry-night2.jpg" alt=""> </div>
<div id="display"><h1>display: block</h1> The quick brown fox jumps over the lazy dog <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/f/f2/VangoghStarry-night2.jpg/300px-VangoghStarry-night2.jpg" alt=""></div>

How to remove the extra space around the image inside a div

As you describe you just want to consume all the space inside the col div (Left and Right blank space).

What you have to do is to reduce the default padding of bootstrap columns of padding-left: 15px; padding-right: 15px to 0px. And it will work for you.

Sometimes your styles get overloaded by the bootstrap styles. So in that case you have to use the keyword !important with your CSS property to overload all other CSS styles define for that particular property.

.zero-padding {
padding: 0px !important;
}

And to force the image to use all the space inside the col div you have to use the following CSS.

.fill-space {
height: 100%;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
}

.fill-space img {
flex-shrink: 0;
min-width: 100%;
min-height: 100%;
}

In order to force the images on the right side to take the 50% of height to the above 2 images and 50% of height to the image below; you should use the following CSS.

.half-height{
height: 50%;
}


OUTPUT:

Sample Image



Working Snippet below:

.zero-padding {
padding: 0px !important;
}

.fill-space {
height: 100%;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
}

.fill-space img {
flex-shrink: 0;
min-width: 100%;
min-height: 100%;
}

.half-height{
height: 50%;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<div class="row">
<div class="col-md-8 col-lg-8 B">
<div class="card card-inverse" style="background-color: #333; border-color: #333;">
<img class="img-fluid" src="http://lorempicsum.com/rio/800/500/4" alt="Responsive image">
</div>
</div>
<div class="col-md-4 col-lg-4 row zero-padding">
<div class="col-md-6 col-lg-6 B zero-padding half-height">
<div class="card card-inverse fill-space" style="background-color: #333; border-color: #333;">
<img class="img-fluid" src="http://lorempicsum.com/rio/800/500/4" alt="Responsive image">
</div>
</div>
<div class="col-md-6 col-lg-6 B zero-padding half-height">
<div class="card card-inverse fill-space" style="background-color: #333; border-color: #333;">
<img class="img-fluid" src="http://lorempicsum.com/rio/800/500/4" alt="Responsive image">
</div>
</div>
<div class="col-md-12 zero-padding half-height">
<div class="card card-inverse fill-space" style="background-color: #333; border-color: #333;">
<img class="img-fluid" src="http://lorempicsum.com/rio/800/500/3" alt="Responsive image">
</div>
</div>
</div>
</div>
</div>

Floating a div with image results in extra space

Your images width (caused by its class .class-0-569) is 33%. But that's of its container / parent element, i.e. the floated .class-0-568 element.

Apply the 33% width to the image's parent (.class-0-568) and 100% width to the image itself:

.class-0-568 {
float: left;
width: 33%;
}

.class-0-569 {
padding-right: 2%;
width: 100%;
height: auto;
}

.class-0-570 {
line-height: 1.2em;
margin-top: 0.2816004em;
}
<div class="class-0-568" id="id-0-553">
<img alt="" class="class-0-569" id="id-0-554" src="https://i.postimg.cc/BZYZRfKP/image-0-4.jpg">
</div>
<p class="class-0-570" id="id-0-555">These offer a description of who you are</p>

There is a small space below the img

Adding display: block; to the image is one fix.

See also : What is the gap or extra space below image?

HTML/CSS: div, anchor and image tag with space below

Try adding a { float:left } or a { vertical-align: middle }

Image with border in corners - space below img

This is due to the default baseline vertical alignment for images, which leaves some empty space below that baseline (where the descenders of letters like j, p, y would go). Add display: block; to the CSS rule for your image to change this.

https://jsfiddle.net/tpqzr3w2/

Remove white space below image

You're seeing the space for descenders (the bits that hang off the bottom of 'y' and 'p') because img is an inline element by default. This removes the gap:

.youtube-thumb img { display: block; }


Related Topics



Leave a reply



Submit