CODEWITHSUNDEEP
htmlcssimage
denicio
denicio

Reputation: 562

Two <img> without spacing

<html>
 <head>
  <meta name="viewport" content="width=device-width"/>
  <title>HAHAHA</title>
  <STYLE TYPE="text/css" media="screen">
  *
  {
   padding: 0;
    margin: 0;
  }
   body
   {
    padding: 0;
    margin: 0;
   }
   #flexbox
   {
    //display: -webkit-box;
    //-webkit-box-orient: horizontal;
    //-webkit-box-align: stretch;
    //width: auto;
   }
  </STYLE>
 </head>
 <BODY style="padding:0;margin:0;border:0;">
  <!--<div id="flexbox">
   <img src="1.jpg" width="100px" style="padding:0;margin:0;"/>
   <img src="1.jpg" width="100px"/>
   <img src="1.jpg" width="100px"/>
  </div>-->
  <img src="http://is.gd/kjxtj" style="padding:0;margin:0;border:0;"/>
   <img src="http://is.gd/kjxtj" style="padding:0;margin:0;border:0;"/>
 </BODY>
</html>

Why do these images always have a small space in between them, even if i have padding & margin set to 0 on body and all other elements in page?

OK this is the full unedited code.

EDIT: just found out its the line break between the two IMG. SO... i cannot press enter between the two elements? lol... :)

Upvotes: 5

Views: 3937

Answers (5)

zzzzBov
zzzzBov

Reputation: 179046

images are displayed inline by default, which is likely your issue. White-space characters in HTML are condensed, however they will still appear as a space if any exist between HTML elements.

The following HTML will render with a slight space between images.

<div class="images">
    <img src="http://placehold.it/400x300" />
    <img src="http://placehold.it/400x300" />
</div>

If you'd like to make them flush against each other, you could try floating the images:

img {
  float: left;
}

Floating comes with its own issues if you're new to CSS.

An alternative is to adjust the markup to get rid of extra white-space characters. A common way to do this is called "fishy" syntax:

<div class="images"
    ><img src="http://placehold.it/400x300"
    /><img src="http://placehold.it/400x300"
/></div>

The way it works is that the closing > character of each element is moved to just before the beginning < character such that there's no white-space within any HTML element as content. Instead, the white-spaces for indentation are within the HTML tags, where the white-space is ignored completely.

There was a w3c feature request for a new property on white-space, which could theoretically allow CSS to remove all spaces from an element. The orignal proposal was white-space: ignore; however I much prefer (and suggested) white-space: none;.

It appears, however, that updating white-space is not likely to happen, and instead the suggestion was to use flexbox to remove spaces appropriately:

extending off the original HTML example: 
.images {
    display: flex;
}

Of course, it will be some time before flexbox has enough cross-browser support to be useful in a commercial environment, so for the time being I recommend sticking with the fishy syntax.

Upvotes: 5

Leniel Maccaferri
Leniel Maccaferri

Reputation: 102408

There's a good trick to overcome this:

Place your images inside a <div> and then set

font-size:0px;

to the <div>.

You can continue keeping the elements on separate lines.

Upvotes: 3

Quentin
Quentin

Reputation: 943563

i cannot press enterin between the two elements? lol... :)

Nothing distinguishes one type of white space from another in most parts of HTML.

You can, however, format your code such:

<img src="..." alt="..."
><img src="..." alt="...">

… to remove the space between the elements.

Upvotes: 6

David Thomas
David Thomas

Reputation: 253318

While I think the problem is coming from another point in your mark-up, and/or CSS, I would suggest ensuring that you've zeroed out both margin, padding and border for the img element:

img {
margin: 0;
padding: 0;
border-width: 0;
}

This should take care of the problem, but if not we may need to see your real html and css (or a live demo that reproduces the problem, at JS Bin, or JS Fiddle) to help you further.

Upvotes: 1

Doug Chamberlain
Doug Chamberlain

Reputation: 11341

I believe this is also necessary if you are viewing in an older version of IE 

img {
    border:0
    }

Upvotes: 1

Related Questions