Search code examples
htmlcssposition

Set width of element to "0" (not absolute positioned) with CSS

I have an element and even if i define "max-width=0" it has a width of 4px, see the image:

i want to remove the gap on the upper left

When i position the element absolute it is gone but due to the css transition (logo slides in on scroll down > 250px) i can not position it absolute.

This is the CSS:

#page-wrap.oben ul#menu li.menutext {
    padding: 0;
    line-height: normal;
    overflow: hidden;
}
#page-wrap.oben li.menutext a {
    font-size: 24px;
    max-width: 0;
    opacity: 0;        
    vertical-align: middle;

    -webkit-transition: all .6s;
    -moz-transition: all .6s;
    -ms-transition: all .6s;
    -o-transition: all .6s;
    transition: all .6s;
}

And this is the HTML:

<li class="menutext biggerfont">
   <a href="#">
       Schooool!
   </a>
</li>
Solution

  • Its because you have a space between your </li><li> elements. If you remove the whitespace in between the closing and opening li this will eliminate the gap.