Dlaczego display = inline-block dodaje niekontrolowane pionowe marginesy

Próbuję rozwiązać mój problemhttp://jsfiddle.net i mają tam najdziwniejsze zachowanie. Czy możesz wyjaśnić, gdzie te (http://jsfiddle.net/C6V3S/) pochodzą z pionowych marginesów? Pojawia się na jsfiddle.net (przynajmniej w Chrome i FF), nie pojawia się podczas kopiowania / wklejania do lokalnego autonomicznego pliku ...

działa OK afer zmienia się na prosty blok

Przykład dla samodzielnego pliku testowego: .btn {padding: 0px; obramowanie: 1px pełny czerwony; wyświetlacz: blok śródliniowy; }

.txt {
    display: inline-block;
    width: 12px;
    height: 12px;
    border: none;
    padding: 0;
    margin: 0;
    background: #77FF77;
}
</style>

<div class="btn"><div class="txt"></div></div>

questionAnswers(4)

yourAnswerToTheQuestion