Question

the problem is that the I button stays a bit lower (especially in chrome), if I remove the font-family from bitalic than it’s aligned equally

 <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;    
}

Answer 1

I think the most common solution to make elements line up correctly horisontally is to use CSS float: left:

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