«Загадочные отступы» между инлайн-элементами

by LuckyCat

HTML

<div class="home_buttons_container">
    <div class="inline_container">
        <a href="#" class="home_button_icon"><span>Chat</span></a>
        <a href="#" class="home_button_icon"><span>Mailbox</span></a>
        <a href="#" class="home_button_icon"><span>Activity</span></a>
    </div>
</div>
<div class="home_buttons_container">
    <div class="inline_container">
        <a href="#" class="home_button_icon"><span>Search</span></a>
        <a href="#" class="home_button_icon"><span>Geo Search</span></a>
        <a href="#" class="home_button_icon"><span>Friends</span></a>
    </div>
</div>

CSS

* { margin: 0; padding: 0; }

.home_buttons_container { text-align: center; font-size: 0; line-height: 0; }
  .inline_container { display: inline-block; font-size: 0; line-height: 0; }
    .home_button_icon {
        text-decoration: none;
        color: #fff; text-shadow: 0 -1px #b36962;
        position: relative;
        
        display: block; float: left; margin-right: 5px; margin-bottom: 5px;
        
        width: 86px; height: 85px; background-color: #f5f5f5;
        -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px;
        -webkit-box-shadow: 0 0 0 1px #554775, inset 0 1px rgba(255,255,255,.51); box-shadow: 0 0 0 1px #554775, inset 0 1px rgba(255,255,255,.51);
        border: solid 1px #ed7165;
        background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#f79f98), to(#ed7165));
        background-image: -webkit-linear-gradient(bottom, #ed7165, #f79f98);
        background-image: linear-gradient(to top, #ed7165, #f79f98);
    }
    .home_button_icon:last-of-type { margin-right: 0; }
    .home_button_icon:hover,
    .home_button_icon:active,
    .home_button_icon.active {
        -webkit-border-radius: 2px; border-radius: 2px; background-color: #554775;
        -webkit-box-shadow: 0 0 0 1px #554775, inset 1px 1px 25px rgba(130,62,56,.78); box-shadow: 0 0 0 1px #554775, inset 1px 1px 25px rgba(130,62,56,.78);
        border: solid 1px #ed7165;
        background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#f79f98), to(#ed7165));
        background-image: -webkit-linear-gradient(bottom, #ed7165, #f79f98);
        background-image: linear-gradient(to top, #ed7165, #f79f98);
    }