How to align images side by side without spacing when grouped within another element

Question

I am trying to align these images side by side. Unfortunately there is a visible gap between the images.

How do I get rid of it without changing the functionality of when clicking my radio images an image appears?

I've tried floating the images to the left but unfortunately that does not work

HTML:

<div class="buttons">
<input type="radio" name="a" value="1.0" id="b" />
<label for="b"><img id="img1" src="mypicone.png"></label>

<input type="radio" name="a" value="2.0" id="c" />
<label for="c"><img id="img3" src="mypictwo.png"></label>

<input type="radio" name="a" value="3.0" id="d" />
<label for="d"><img id="img5" src="mypicthree.png"></label>
</div>

CSS:

input[type="radio"] {
 display: none;
}
input[type="radio"]:checked + label {
 position: relative
}
input[type="radio"]:checked + label::before {
content: url("//lorempixel.com/10/10");
position: absolute;
left: 15px
}

Fiddle:

https://jsfiddle.net/emeka/qbukpfn5/1/

uh. do you have padding on teh labels, or margin on the images, or... anything else that might impact this. native rules, if you aren't using a reset. something else? make a working fiddle with the issue. — Bosworth99, Mar 05 '16 at 20:03
can you post JSFiddle snippet? so it's easier to work with your code? — Farside, Mar 05 '16 at 20:04
img is an inline block and you do not need float it to the left. I run your code and the images are side by side. of course after setting the width and size for them — Leo The Four, Mar 05 '16 at 20:13
Check solution below using float:left; or removing spaces from html code. [Remove margin between two input elements](http://stackoverflow.com/questions/9832754/i-cant-remove-the-margin-between-two-input-fields) — Viv, Mar 05 '16 at 20:50

tao · Accepted Answer · 2016-03-06T00:12:30.940

labels are inline elements. This means they will be displayed, from the page's point of view, just as a "letter" would.

In HTML, if you put a letter on each line and the parent wraps normally, new lines will be rendered by the browser into spaces. They are "smart" spaces, as in, only one of two or more subsequent such spaces will be rendered.

This is, basically, what happens with the new lines between your labels. They are rendered as spaces. To fix it, you have three options:

1. remove all spaces/new-lines between your elements

body {margin: 0;}
input[type="radio"] {
  display: none;
}
input[type="radio"]:checked + label {
  position: relative
}
input[type="radio"]:checked + label::before {
  content: url("http:://lorempixel.com/10/10");
  position: absolute;
  left: 15px
}
#img1, #img3, #img5 {
  width: 100px;
  height:100px;
}

<div class="buttons"><input type="radio" name="a" value="1.0" id="b" /><label for="b"><img id="img1" src="http://lorempixel.com/10/10"></label><input type="radio" name="a" value="2.0" id="c" /><label for="c"><img id="img3" src="http://lorempixel.com/10/10"></label><input type="radio" name="a" value="3.0" id="d" /><label for="d"><img id="img5" src="http://lorempixel.com/10/10"></label></div>

Alternatively, you can just comment those spaces/new-lines:

body {margin: 0;}
input[type="radio"] {
  display: none;
}
input[type="radio"]:checked + label {
  position: relative
}
input[type="radio"]:checked + label::before {
  content: url("http:://lorempixel.com/10/10");
  position: absolute;
  left: 15px
}
#img1, #img3, #img5 {
  width: 100px;
  height:100px;
}

<div class="buttons"><!--
--><input type="radio" name="a" value="1.0" id="b" /><!--
--><label for="b"><img id="img1" src="http://lorempixel.com/10/10"></label><!--

--><input type="radio" name="a" value="2.0" id="c" /><!--
--><label for="c"><img id="img3" src="http://lorempixel.com/10/10"></label><!--

--><input type="radio" name="a" value="3.0" id="d" /><!--
--><label for="d"><img id="img5" src="http://lorempixel.com/10/10"></label><!--
--></div>

2. Float your labels to the left

This will not remove the spaces, but it groups your labels glued to the left. The spaces are still rendered, after the labels:

input[type="radio"] + label {
    float: left;
}

body {margin: 0;}
input[type="radio"] {
  display: none;
}
input[type="radio"]:checked + label {
  position: relative
}
input[type="radio"]:checked + label::before {
  content: url("http:://lorempixel.com/10/10");
  position: absolute;
  left: 15px
}
#img1, #img3, #img5 {
  width: 100px;
  height:100px;
}
input[type="radio"] + label {
  float: left;
}

<div class="buttons">
<input type="radio" name="a" value="1.0" id="b" />
<label for="b"><img id="img1" src="http://lorempixel.com/10/10"></label>

<input type="radio" name="a" value="2.0" id="c" />
<label for="c"><img id="img3" src="http://lorempixel.com/10/10"></label>

<input type="radio" name="a" value="3.0" id="d" />
<label for="d"><img id="img5" src="http://lorempixel.com/10/10"></label>
</div>

Updated fiddle

3. Alternatively, you can just give `.buttons` a `font-size` of `0`

making those pesky spaces have 0 × 0 px. However, if you have rendered text inside .buttons, you should give the immediate children of .buttons a "normal" font-size:

.buttons {
  font-size: 0;
}
.buttons>* {
  font-size: 1em;
}

body { margin: 0; }
input[type="radio"] {
  display: none;
}
input[type="radio"]:checked + label {
  position: relative
}
input[type="radio"]:checked + label::before {
  content: url("http:://lorempixel.com/10/10");
  position: absolute;
  left: 15px
}
#img1, #img3, #img5 {
  width: 100px;
  height:100px;
 }
.buttons {
  font-size: 0;
}
.buttons>* {
  font-size: 1em;
}

<div class="buttons">
<input type="radio" name="a" value="1.0" id="b" />
<label for="b"><img id="img1" src="http://lorempixel.com/10/10"></label>

<input type="radio" name="a" value="2.0" id="c" />
<label for="c"><img id="img3" src="http://lorempixel.com/10/10"></label>

<input type="radio" name="a" value="3.0" id="d" />
<label for="d"><img id="img5" src="http://lorempixel.com/10/10"></label>
</div>

There is negative margin and vertical-align too, but don't spend to much time on this, its been answered before: http://stackoverflow.com/questions/5078239/how-to-remove-the-space-between-inline-block-elements — Asons, Mar 06 '16 at 00:16

score 0 · Answer 2 · answered Mar 05 '16 at 21:06

I simply moved the id's to the label tags

<div class="buttons">
<input type="radio" name="a" value="1.0" id="b" />
<label for="b" id="img1"><img id="img2"  src="http://lorempixel.com/10/10">  
</label>

<input type="radio" name="a" value="2.0" id="c" />
<label for="c" id="img3"><img  id="img4" src="http://lorempixel.com/10/10"> 
</label>

<input type="radio" name="a" value="3.0" id="d" />
<label for="d" id="img5"><img  id="img6" src="http://lorempixel.com/10/10"> 
</label>
</div>

CSS:

input[type="radio"] {
display: none;
}
input[type="radio"]:checked + label {
position: relative
}
input[type="radio"]:checked + label::before {
content: url("http:://lorempixel.com/10/10");
position: absolute;
left: 15px
}
#img2, #img4, #img6 {
width: 100px;
height: 100px;
}
#img1 {float: left}
#img3 {float: left}
#img5 {float: left}

Fiddle:

https://jsfiddle.net/qbukpfn5/3/

score 0 · Answer 3 · answered Mar 05 '16 at 21:21

0

add to your CSS :

label {
 position: relative;
}

label[for="c"] {
 left: -4px; 
}

label[for="d"]
{
 left: -8px
}

answered Mar 05 '16 at 21:21

simo logas

11
3

How to align images side by side without spacing when grouped within another element

3 Answers3

1. remove all spaces/new-lines between your elements

2. Float your labels to the left

3. Alternatively, you can just give .buttons a font-size of 0

3. Alternatively, you can just give `.buttons` a `font-size` of `0`