Why does my image have space underneath?
Images (and inline-block elements in general) are treated like a character.
As such, they obey the rule of the baseline.
In normal text, the baseline is the line across the bottom of most letters, such as in this sentence.
But some letters, such as p
, q
, j
and so on, have tails that drop below the baseline. In order to prevent these tails from colliding with letters on the next line, space is reserved between the baseline and the bottom line.
This diagram illustrates the different lines used by text:
(Image from WHATWG)
So, the image is aligned to the baseline, even if there is no text. Fortunately, the fix is very simple:
img {vertical-align:bottom}
This will align the image to the bottom of the line, also removing the mystery space.
Just be careful, if your image is small (smaller than the line height), you may start seeing mystery space appearing above the image instead. To fix this, add line-height:1px
to the container element.
Hopefully this helps the many people I've seen ask about this and similar problems!
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="Sample Image"></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="Sample Image"> </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="Sample Image"> </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="Sample Image"></div>
Mystery white space underneath image tag
By default, IMG is an inline element. You need to set your IMG tag to be a block element, which can be accomplished with this style:
display: block;
scaling image in html creates white space underneath
You need to update min-height property as the screen size changes.
Edit: You can add a media query.
@media (max-width: 768px) {
#headerwrap {
min-height: 100%;
}
}
And also remove br elements above the artist's name and align the content vertically.
White space under image
Add this
div{
line-height: 0;
}
Fiddle
Why does a create a little space under the image?
First, by default element has an 'outline' decoration, to disable it use the following css rule:
a { outline: 0 }
Second, the area is created by another css property you apply on the image itself: 'margin', which is the margin between the image to the elements around it, in this case it affects the element which wraps it, to fix that change the following rules:
.socialBtn {
/* Removed margin here so there won't be space around image */
height: 2.5em;
width: 2.5em;
}
a {
height: 2.5em; /* Gave it width like the image */
width: 2.5em; /* Gave it height like the image */
display: inline-block; /* Made it inline-block so it can have width and height */
}
http://jsfiddle.net/we67Lp6o/6/
UPDATE:
Changing source to understand how the display property: block vs inline-block vs inline.
Removed "outline: 0" from a selector, it is a bad practice, read why here.
Why is there massive white space under my image in React? What's creating this mysterious div?
The <div>
with the padding-top
and other styles is coming from the Image
component that you are using from material-ui-image
.
Below is the overall structure rendered by that Image
component:
<div
style={styles.root}
onClick={onClick}
>
{image.src && <img
{...image}
style={styles.image}
onLoad={this.handleLoadImage}
onError={this.handleImageError}
/>}
<div style={styles.iconContainer}>
{!disableSpinner && !this.state.imageLoaded && !this.state.imageError && loading}
{!disableError && this.state.imageError && errorIcon}
</div>
</div>
padding-top
is part of the styles in styles.root
.
styles.root:
const styles = {
root: {
backgroundColor: color,
paddingTop: `calc(1 / ${aspectRatio} * 100%)`,
position: 'relative',
...style
},
When padding-top
is a percentage, it is a percentage of the width, so it is important to control the width of the container in order to have predictable behavior.
You can modify the padding-top
by either explicitly overriding it via the style
prop or by specifying the appropriate value in the aspectRatio
prop. By default, this Image component is assuming square images (aspectRatio: 1
).
Here is a working example demonstrating both ways of controlling padding-top
:
import React from "react";
import Image from "material-ui-image";
import Box from "@material-ui/core/Box";
export default function App() {
return (
<>
<Box m={4} width={200}>
<Image
aspectRatio={1.5}
src="https://www.publicdomainpictures.net/pictures/10000/velka/black-monkey-11280155875i3QV.jpg"
/>
Something under image 1
</Box>
<Box m={4} width={200}>
<Image
style={{
paddingTop: "calc(66.7%)"
}}
src="https://www.publicdomainpictures.net/pictures/10000/velka/black-monkey-11280155875i3QV.jpg"
/>
Something under image 2
</Box>
</>
);
}
Slightly related answer (with regard to the use of padding-top
): A good way to handle @material-ui Skeleton scaling within a variable height grid row?
There is always a little space under images inside a table
Problem isn't the table actually, img tags are inline elements and have that bottom spacing by default (something with line-height I guess, don't really know why).
Solution: div.browseBuilds tr.browseBuilds_piece img { display: block; }
Unwanted white space under image containing entry in IE
Try adding min-height: 1px;
to #main ul#postlist li .content
If that doesn't work, trying using flex: 1 0 auto;
instead of the flex-grow property.
We experienced this same issue while using flex to enforce a sticky footer on our site. We noticed the issue resolved itself when we added bootstrap's col-xs-12 class to the image's container. After weeding out the other CSS attributes, we found that all we needed from col-xs-12 was the min-height:1px
property to make IE happy.
Cheers!
Related Topics
What Are All the Valid Self-Closing Elements in Xhtml (As Implemented by the Major Browsers)
How to Set Tbody Height With Overflow Scroll
Reading HTML Content from a Uiwebview
Using HTML and Local Images Within Uiwebview
Target="_Blank" Vs. Target="_New"
Make a Link Open a New Window (Not Tab)
Change Bootstrap Tooltip Color
Multiple Submit Buttons in an HTML Form
Css: Control Space Between Bullet and ≪Li≫
Is It Valid to Have a HTML Form Inside Another HTML Form
Generate an HTML Response in a Java Servlet
How to Change the Button Text of ≪Input Type="File" /≫
How to Get HTML 5 Input Type="Date" Working in Firefox And/Or Ie 10
Google Chrome Form Autofill and Its Yellow Background