Box-sizing:border-box and forget about problems with block widths
HTML
<div class="container">
<div id="el1">Element 1</div>
<div id="el2">Element 2</div>
<div id="el3">Element 3</div>
</div>
CSS
.container{
text-align:center;
}
.container div{
/*Установка метода box-sizing */
box-sizing:border-box;
/*Firefox у нас особенный, поэтому всё ещё требует префиксов*/
-moz-box-sizing:border-box;
width:120px;
height:120px;
display:inline-block;
vertical-align:top;
}
/*Благодаря правилу box-sizing мы можем устанавливать значения padding и border какими угодно, и элементы будут оставаться такого же размера, как и были*/
#el1{
color:#524480;
background-color:#B2A4E0;
}
#el2{
padding:8px;
border:10px solid #9ec551;
background-color:#fff;
}
#el3{
padding:32px;
background-color:#ccc;
}
