0

Guys u i have some space in ul list. I try to set padding: 0 and margin: 0 and not work i has again space near left border. Check my screenshot:

enter image description here

Here is my code:

div.topbar-list > ul {
  margin: 0;
  padding: 0;
  overflow: hidden;
  list-style: none;
}
div.topbar-list > ul > li {
  padding: 5px;
  display: inline-block;
  border-left: 1px solid #ccc;
  -webkit-transition: all 0.5s ease;
  -moz-transition: all 0.5s ease;
  -o-transition: all 0.5s ease;
  transition: all 0.5s ease;
}
div.topbar-list > ul > li:first-child {
  border-right: 0 none;
}
div.topbar-list > ul > li a {
  color: #333;
}
div.topbar-list > ul li:hover {
  background-color: #eee;
}
div.topbar-list > ul > li a:hover {
  text-decoration: none;
}
<div class="topbar-list">
  <ul>
    <li><a href="#"><i class="fa fa-phone-square"></i>  +381 123 342 543</a>
    </li>
    <li><a href="#"><i class="fa fa-mobile-phone"></i> +381 123 432 542</a>
    </li>
    <li><a href="#"><i class="fa fa-mobile-phone"></i> +381 315 645 122</a>
    </li>
  </ul>
</div>

Also i try to debug it from Inspector/Firebug but there is not any padding and fixed width. How i can remove that white space?

KuKeC
  • 4,392
  • 5
  • 31
  • 60
Ivan
  • 5,139
  • 11
  • 53
  • 86

2 Answers2

3
Use Float:left; instead of display:inline-block;

Because display:inline-block always put some spacing.

Mukesh Ram
  • 6,248
  • 4
  • 19
  • 37
-1

that's caused by the "display: inline-block". To fix it you can give the element a negative margin.

Daniel
  • 1
  • 3
  • You are correct about the `inline-block`, though negative margin won't fix it. – Chris Jun 08 '16 at 13:18
  • Chris, are you sure? I've used the negative margin in one of my project and it worked perfectly... – Daniel Jun 08 '16 at 13:21
  • It's more of a hack, than a proper fix really. The initial space is still there. It's better to just remove the space altogether. – Chris Jun 08 '16 at 13:23
  • Negative margins will work but is a bad way to do this. The reason is because the space depends on various factors like the font, its size etc. So a `margin-right: -4px` would not work for all cases. – Harry Jun 08 '16 at 13:23