Why Does My Image Have Space Underneath

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:

WHATWG's baseline diagram
(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.

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="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>
</>
);
}

Edit material-ui-image

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



Leave a reply



Submit