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.
You can:
- adjust the
vertical-align
of the image to position it elsewhere (e.g. themiddle
) 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:
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
Absolute Div Height Being Cut Off Inside Relative Div
Flexbox: Center Horizontally and Vertically
What Are Valid Values For the Id Attribute in Html
Maintain the Aspect Ratio of a Div With Css
Center One and Right/Left Align Other Flexbox Element
Css Margin Terror; Margin Adds Space Outside Parent Element
How to Make a Div 100% Height of the Browser Window
Why Is Percentage Height Not Working on My Div
Why Does This CSS Margin-Top Style Not Work
Understanding CSS Selector Priority/Specificity
How to Disable Browser Autocomplete on Web Form Field/Input Tags
Max Parallel Http Connections in a Browser
How to Style a Checkbox Using Css
Flexbox Code Working on All Browsers Except Safari. Why
Why Aren't My Absolutely/Fixed-Positioned Elements Located Where I Expect