css image replacement: why the kellum method doesn't work with button elements?

Question

I've found out that the kellum method doesn't really work with html button elements. More precisely, it works but need more text indent. To recap, this is the techniqhe:

text-indent: 100%;
white-space: nowrap;
overflow: hidden;

With button elems, I've got to text-indent more, say 200%, it depends, it seems not to have a specific rule, but surely more than 100%. Why?

Answer 1

Some elements like button have an intrinsic padding.

Remove that, and you will get consistent results. Also, use a reset css whenever possible to provide you with a clean slate to start your styling with. Proper box-sizing is also important.

This is the reason, people generally play safe and use an indent of far more than 100%.

Check this snippet: (Try removing padding from *)

* {
    box-sizing: border-box;
    margin: 0; padding: 0;
}
button, span {
    width: 120px;
    height: 32px;
    text-indent: 100%;
    white-space: nowrap;
    overflow: hidden;
    display: inline-block;
    border: 1px solid gray;
    vertical-align: middle;
}

<button>Button</button>
<span>Span</span>