3 butoane cu fonturi diferite se aliniază vertical în mod diferit

problema este că butonul I rămâne un pic mai mic (mai ales în cazul cromului), dacă elimină familia de fonturi de la bitalic decât este aliniată în mod egal

 <div>
     <button type="button" onclick="ab('*');" class="bbold">B</button>
     <button type="button" onclick="ab('_');" class="bitalic">I</button>
     <button type="button" onclick="ab('code');" class="bcode">{code}</button>
 </div>

.bbold, .bitalic, .bcode
{
    height: 30px;
    min-width: 30px;
}
.bbold {
    font-weight: bold;        
}
.bitalic
{
    font-family: "Times New Roman";
    font-style: italic;
    font-weight: bold;        
}
.bcode
{
    font-family: consolas, courier;    
}
0

3 răspunsuri

Cred că soluția cea mai comună pentru a face ca elementele să se alinieze corect în mod orizontal este să folosească floating CSS: stânga:

.bbold, .bitalic, .bcode
{
    float: left;
    height: 30px;
    min-width: 30px;
}
1
adăugat

Încercați să setați înălțimea liniei la 30 de pixeli pe toate butoanele, în mod normal, aceasta ar trebui să o remedieze:

.bbold, .bitalic, .bcode
{
    height: 30px;
    min-width: 30px;
    line-height: 30px;
}
1
adăugat

Schimbarea stilului font-style modifică spațiul necesar pentru a face acest lucru și dimensionarea.

Setarea text-align: text-bottom; ar trebui să o rezolve.

1
adăugat