How to fix white space under an image using CSS and HTML

Details
Written by: Bjørn Ove Bremnes
Parent Category: Tips & Tricks
Category: Tips & Tricks - Basic Web Design - Tutorials

Have you ever been frustrated by styling a page for then realize that every image contains a white line underneath, I saw this trick on Youtube and tried it with Joomla. The result was that line disappeared. This issue resides from the early internet when we've to use inline images in the text.

IN INternerts early days it was very common to use images inside a text, back then there was eighter Desktops or Laptops that were used as surf method. The internet has evolved since those days, and we now use images on top of the text. Therefore it's very useful to hide the line that displays under the image. Here are two examples that show this:

 

 Earlier:

Image with white line under

This was how images displayed shown on a website without adding the new CSS property. The border is showing whitespace.

NOW:

Image with no white line under, css fix

 The trick is to set the image to display block.

img {
display: block;
}

 Thanks to Kevin Powell and this video on Youtube, that showed this.

 

Comments wanted

- LET ME KNOW IF YOU KNOW ANY OTHER WAYS TO DO THIS IN THE COMMENTS BELOW -

Add comment

By submitting a comment, you agree to our Comment Policy and Privacy Policy. Please keep comments respectful, relevant, and free from spam or promotional content. Your name and comment may be displayed publicly, while your email address will not normally be published. Technical information, including your IP address, may be processed for moderation, security, and spam prevention.

Submit