0

There are random spaces that appear between each of the images. I wish to have them stick together but i cannot get how to do it, whatever i do...

Html:

<div class="nav">
<a href="enconstruction.php"><img src="images/barre3/Environnement Gris.png" class="img1"></a>
<a href="inter.php"><img src="images/barre3/Services publics gris.png" class="img2"></a>
<a href="enconstruction.php"><img src="images/barre3/droits syndicaux gris.png" class="img3"></a>
<a href="mob.php"><img src="images/barre3/mobilisation Gris.png" class="img4"></a>
<a href="index.php"><img src="images/barre3/Home gris.png" class="img5"></a>

And the Css:

.nav
{
position:fixed;
bottom:-4px;
width:auto;
height:150px;
margin:0 auto;
z-index:5;
}

.img1
{
position:relative;
width:180px;
height:auto;
}

.img2
{
position:relative;
width:212px;
height:auto;
}

.img3
{
position:relative;
width:245px;
height:auto;
}

.img4
{
position:relative;
width:218px;
height:auto;
}

.img5
{
position:relative;
width:165px;
height:auto;
}
Robert Harvey
  • 178,213
  • 47
  • 333
  • 501
nicklegault101
  • 3
  • 2

2 Answers2

1

Inline elements are sensitive to white space in the code. You can get rid of it by:

  • Removing the space </a><a href=...
  • Putting HTML comments between the elements </a><!-- --><a href=
  • Setting the font size on the parent to zero
j08691
  • 204,283
  • 31
  • 260
  • 272
0

The issue is default spacing in inline elements (which img tags are inherently). There are several methods to correct this. To name a few:

  1. You can add font-size: 0; to the parent .nav - example
  2. You can do what j08691 suggested and remove the space </a><a href=... - example
  3. You can use float: left and add overflow: hidden to the parent .nav to clear the floats - example
jmore009
  • 12,863
  • 1
  • 19
  • 34