1

How do you remove unneeded space around images in HTML?

One of my images is coming to far away from the text, and it is messing up the look of the website. There is nothing wrong with the CSS I am using, but I believe because that there is too many HTML tags around it, it has a large space.

Please limit solutions to basic CSS and HTML, as per I can properly understand how it works.

EDIT: I am sorry, I was a bit vague about what my challenge was. I am using the Bootstrap Library, and have been looking a this following template:

http://www.markups.io/preview/varsity/

I really like the template, and I am occasionally taking code snippets out of it. I used the top bar, and replaced their logo with a different image. The image looks fine on desktop, but when a go on my mobile phone, it comes out what too low covering some important content. Anything you guys can do?

EDIT 2:

I have attached two photos of the look and what the problem looks like. The first one is the Desktop view (which is great), and the second one is the mobile view (which is too low). I don't have any more information... from the original post to EDIT 1, EDIT 2, that is all the info that I have.

Desktop View

Mobile View

  • Try removing any line breaks or spaces around the image. – brenjt Aug 16 '16 at 14:47
  • 1
    Provide html/css of your problem at hand please. – Arathi Sreekumar Aug 16 '16 at 14:48
  • Questions seeking code help must include the shortest code necessary to reproduce it **in the question itself** preferably in a [**Stack Snippet**](https://blog.stackoverflow.com/2014/09/introducing-runnable-javascript-css-and-html-code-snippets/). See [**How to create a Minimal, Complete, and Verifiable example**](http://stackoverflow.com/help/mcve) – Paulie_D Aug 16 '16 at 14:51

5 Answers5

1

Remove the spaces and line breaks between images:

    <img src="http://placehold.it/20x20" />   <img src="http://placehold.it/20x20" />
    <img src="http://placehold.it/20x20" />

to:

    <img src="http://placehold.it/20x20" /><img src="http://placehold.it/20x20" /><img src="http://placehold.it/20x20" />
Randy
  • 9,419
  • 5
  • 39
  • 56
Ashkan Mobayen Khiabani
  • 33,575
  • 33
  • 102
  • 171
  • Although this works great, I hate the solution. This is going to look like garbage combined with a train wreck in your source code! – Randy Aug 16 '16 at 15:07
  • well you have no chance except adding some negative margins, which is not a wise choice. you may also add them in a parent and then using javascript remove the white space between tags in the parent html (which is not also a good idea) – Ashkan Mobayen Khiabani Aug 16 '16 at 15:10
  • Yea I personally never have this issue because I use a HTML minify tool with Gulp, but I feel sorry for the poor programmers that need this. – Randy Aug 16 '16 at 15:11
  • This is the way beleive it or not ;) – Ashkan Mobayen Khiabani Aug 16 '16 at 15:13
  • Hey @AshkanMobayenKhiabani, I tried that out with all the div tags and text around it, and it still didn't work... –  Aug 16 '16 at 15:28
0

Put this in your css file: 

img {
    margin: 0;
}

or use this in-line style in your html file:

<style type="text/css">
    img {
        margin: 0;
    }
</style>
sotn0r
  • 109
  • 6
0

You can use the letter-spacing propriety of CSS

img {
  letter-spacing: -2px;
}
Rafael RN
  • 176
  • 1
  • 8
0

I think you should remove space between your code! so you must change this code

<img src="1.jpg" />   
<img src="2.jpg" />
<img src="3.jpg" />

to this code (add comment code)

<img src="1.jpg" /><!--  
--><img src="2.jpg" /><!--
--><img src="3.jpg" />

or to this code (literally remove space)

<img src="1.jpg" /><img src="2.jpg" /><img src="3.jpg" />
Aroniaina
  • 1,252
  • 13
  • 31
  • Hey @Aroniaina, I tried that out with all the div tags and text around it, and it still didn't work... –  Aug 16 '16 at 15:28
0

Since the template uses twitter bootstrap, try adding img-responsive class to your image

Example, from:

<img src="1.jpg" />

to

<img class="img-responsive" src="1.jpg" />

Ian Martin
  • 1
  • 2