5 replies [Last post]
gautamz07
gautamz07's picture
Offline
Enthusiast
Last seen: 4 years 1 week ago
Timezone: GMT+5.5
Joined: 2014-04-24
Posts: 265
Points: 403

hey guys ,

check out this fiddle :

fiddle

why the mysterious space between the images ??

float:left

seems to solve the problem , is there a more elegant solution , considering everybody dislikes float these days ?.

Thanks .

Gautam.

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 8 hours 51 min ago
Dallas
Timezone: GMT-5
Joined: 2004-06-25
Posts: 9767
Points: 3849

No one with any clue dislikes floats

The image is an inline-replaced element. The space between the images is the word-spacing. In most proportional fonts, the space is ~.3 to .5em wide. There is also a gap at the bottom of the images due to its vertical alignment which defaults to baseline.

The fixes are:

parent {
  word-spacing: -.5em;
  } /*don't forget to reset to zero for child elements containing text.*/
 
img {
  vertical-align: top; /*or bottom*/
  }

Or, do as you've done, and use float, but don't forget to contain them.

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

gautamz07
gautamz07's picture
Offline
Enthusiast
Last seen: 4 years 1 week ago
Timezone: GMT+5.5
Joined: 2014-04-24
Posts: 265
Points: 403

@Gary Thanks ! BTW , the

@Gary Thanks ! BTW , the vertical-align property serve as a solution/hack for a lot of HTML elements ?? because i noticed that when i do :

<label for="me">For me</label>
<input type="radio" id="me">

the input (that round circle) is not aligned with the label and i have to apply the following CSS rule :

input[type="radio"]{
    vertical-align:middle;
}

and then everything is fine .

gautamz07
gautamz07's picture
Offline
Enthusiast
Last seen: 4 years 1 week ago
Timezone: GMT+5.5
Joined: 2014-04-24
Posts: 265
Points: 403

Gary do u use sublime text editor .

@Gary do u use sublime text editor ?? ... Just asking Smile

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 8 hours 51 min ago
Dallas
Timezone: GMT-5
Joined: 2004-06-25
Posts: 9767
Points: 3849

Editor

No, I use the one true editor, Emacs.

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

gautamz07
gautamz07's picture
Offline
Enthusiast
Last seen: 4 years 1 week ago
Timezone: GMT+5.5
Joined: 2014-04-24
Posts: 265
Points: 403

Thanks gary :D

Thanks gary ...