Why I have space between anchor tag and span inside

Question

I have a problem. I have a list with link in all item of the list. And when I want to add a span inside anchor tag, i have a space and can't remove it..

 <li class="elementMyAccount spaceTopBetweenElementMyAccount">

     <a href=""
         class="elementMyAccountText">
         Text4
         <div class="adressDescription" >(text4)</div>
     </a>
</li>

I send you jsFiddle to show you css and html:

https://jsfiddle.net/5fwvsqnb/10

I had remove this space line with change on my css, but it worked only on google chrome ... but not Safari and IE ( don't try others )

I changed css by :

#my-account .elementMyAccountText{
font-size: 15px;
position: absolute;
margin-left : 5px;
line-height:60px;
width:240px;
display: flex;
align-items: center;
}

#my-account .adressDescription{
display:block;
position:absolute;
font-size: 11px;
text-decoration: none;
margin-left: 40px;
line-height:15px;
display: block;
}

But maybe it's not the solution because on IE I have a space between my span and my text above.

Thanks all if you will try to help me !

Answer 1

The issue is in your code, elementMyAccountText class have position: absolute;.

If you want to display TEXT in left align with the center of the box then You can use display: flex to the ul and li and align-items: center; to the li.

If you want full box clickable then

Remove height from elementMyAccount class and add below code

ul li a{
width: 100%;
display: block;
padding: 20px 0; 
}

.listElementMyAccount {
  margin-top: 50px;
}

.listElementMyAccount ul {
  margin-left: -8px;
  display: flex;
}

.elementMyAccount {
  border-radius: 7px;
  border: 1px solid black;
  height: 60px;
  width: 240px;
  margin-left: 8px;
  margin-top: 8px;
  display: flex;
  align-items: center;
}


/*.elementMyAccountText{
 font-size: 15px;
 position: absolute;
 margin-left : 5px;
 line-height:60px;
 width:240px;
 height:60px;

}*/

.elementMyAccountImg {
  margin-left: 5px;
  opacity: 0.75;
  margin-right: 10px;
  vertical-align: middle;
}

.adressDescription {
  display: block;
  position: absolute;
  font-size: 11px;
  text-decoration: none;
  line-height: 15px;
  display: block;
}

<div class="listElementMyAccount">
  <ul>

    <li class="elementMyAccount">
      <a href="" class="elementMyAccountText">
                                    TEXT1
                                </a>
    </li>
    <li class="elementMyAccount">
      <a href="" class="elementMyAccountText">
                                    TEXT2
                                </a>
    </li>
    <li class="elementMyAccount">
      <a href="" class="elementMyAccountText">
                                    TEXT3
                                </a>
    </li>
    <li class="elementMyAccount">
      <a href="" class="elementMyAccountText">
                                    TEXT4
                                                                                                      <span class="adressDescription" >(text4)</span>
                                </a>
    </li>

  </ul>



</div>

Answer 2

I'm not specialist, but I guess, this is because render engine (i don't know to name that) cannot recognize your style e.g. -webkit-column-count. IE is not supporter, if is it, it will no longer soon. Forget about IE.