Remove White Space Below Image

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

How to get rid of white space below image with absolute positioned overlay div

By default, an image is rendered inline, like a letter.

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.

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 do I remove white space from around a body background image?

Just remove the border classname on the first div child of body. This adds a 1px solid border by default.

It's working even without your margin and padding set to 0!important in body since you have a _reboot css that already resets the body to margin 0.

How would I remove white space between images using CSS?

Set display: block for each img. Example in the snippet below. height is set just so the image isn't too big.

img {  display: block;  height: 150px;  }

<img src="http://i.imgur.com/B5vX1kN.jpg"/><img src="http://i.imgur.com/KYXOUfE.png"/>

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;

Remove White Space Below Image