Div sizes donot match

http://stackoverflow.com/questions/10349343/css-display-inline-block-strange-behaviour-with-text-on-new-line

by ryanwfiorini

HTML

<div>
    <span class="prodotto_pulsante_testo_centrato">
        <span class="prodotto_pulsante_testo_titolo">
            operativo
            <span class="prodotto_pulsante_testo_numero">4</span>                                    
        </span>
    </span>       
</div>    

<div>
    <span class="prodotto_pulsante_testo_centrato">
        <span class="prodotto_pulsante_testo_titolo">
            sportello operativo
            <span class="prodotto_pulsante_testo_numero">4</span>                                    
        </span>
    </span>       
</div>

CSS

div
{
    height:30px;
}

.prodotto_pulsante_testo_centrato
{
    display:block;
    text-align:center;
    margin-left:auto;
    margin-right:auto;
    width:120px;
}

.prodotto_pulsante_testo_numero
{
    display:inline-block;
    width:23px;
    position:absolute;
    left:-31px;
    bottom:-1px;
    background-color:green;    
}

.prodotto_pulsante_testo_titolo
{
    margin-left:23px;
    position:relative; 
    background-color:red;  
    text-align:left;    
    display:-moz-inline-stack;
display:inline;
}