DerpyNerd DerpyNerd -4 years ago 143
CSS Question

White space between inline-block elements

I feel like this question shouldn't exist anymore, but I can't seem to find a solution. So here goes.



ul {
list-style-type: none;
width:150px;
}
ul.nav_sub_menu > li {
width: 100%;
}

ul.nav_sub_menu > li a {
display: inline-block;

width: 100%;
padding: 2.5px 0px 2.5px 5px;

background: #213059;

color: white;
text-decoration: none;

border-bottom: 5px solid #253767;
}

ul.nav_sub_menu > li a:hover {
text-decoration: underline;
background-color: #253767;
}

<div class="nav_sub_menu_wrapper">
<ul class="nav_sub_menu">
<li>
<a href="javascript:void(0)" class="nav_sub_button">About me</a></li><li>
<a href="javascript:void(0)" class="nav_sub_button">Goals</a></li><li>
<a href="javascript:void(0)" class="nav_sub_button">Realizations</a></li><li>
<a href="javascript:void(0)" class="nav_sub_button">Future plans</a></li>
</ul>
</div>





This example generates a styles list with
display:inline-block
anchor tags
You might notice from the start that each list-item is separated by a horizontal white line between them. If not, try zooming the browser in or out (visible at 110% for me).

The white space isn't visible at all zoom levels and it only happens in Chrome, that's why I am at a loss.
How does one begin to troubleshoot this?

enter image description here

FYI, I have found this link to be useful but it didn't help. My chrome version:


Chrome Version 56.0.2924.87 (64-bit)

Answer Source

That is a weird issue. I think it might be something to do with the pixel resolution or density perhaps. However I managed to fix it with the below code.

ul {
    list-style-type: none;
    width:150px;
}
ul.nav_sub_menu > li {
    width: 100%;
}

ul.nav_sub_menu > li a {
    display: inline-block;

    width: 100%;
    padding: 2.5px 0px 2.5px 5px;

    background: #213059;

    color: white;
    text-decoration: none;

    border-bottom: 5px solid #253767;
    float: left;
}

ul.nav_sub_menu > li a:hover {
    text-decoration: underline;
    background-color: #253767;
}

All I added was float: left; to the anchor property and it removed the white line between the list items. Try it and see what it does for different zoom levels. Although it does work for 110% zoom for me.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download