CSS: Ancho en porcentaje y Bordes
He definido anchos de los contenedores en porcentaje. Me gustaría agregar un borde (3px en el lado derecho de un ancho), ya que el ancho del contenedor está en% mientras que el ancho del borde está en px, ¿cómo puedo ajustar el ancho del contenedor?
<div class="wrap">
<div class="left">...</div>
<div class="right">...</div>
</div>
.wrap{
width:100%;
}
.left{
width:30%;
}
.right{
width:70%;
}
Me gustaría agregar un borde de 3px en el lado derecho de .left. Por ejemplo:
.left{
width:30%;
border:3px solid #000;
}
Dado que he definido el ancho en %, ¿cuál es la mejor manera de reajustar el ancho del .left? Puedo reducir aproximadamente el ancho al 29%, pero quiero hacerlo con precisión.
Utilice la box-sizing: border-boxpropiedad. Modifica el comportamiento del modelo de caja para tratar el relleno y el borde como parte del ancho total del elemento (sin embargo, no los márgenes). Esto significa que el ancho o alto establecido del elemento incluye las dimensiones establecidas para el relleno y el borde. En su caso, eso significaría que el ancho del elemento y el ancho de su borde consumirían el 30% del espacio disponible.
La compatibilidad con él no es perfecta; sin embargo, los prefijos de los proveedores se adaptarán a la mayoría, si no a todos, los navegadores modernos:
.left {
width: 30%;
border: 3px solid #000;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
}
Puede encontrar más información en MDN y Quirksmode .
Según Quirksmode , al utilizar los 3 prefijos de proveedores anteriores ( -moz-y -webkit-) -ms-, obtienes soporte para todos los navegadores, incluso IE8.
La forma más sencilla entre navegadores es NO establecer el borde en los divs externos y, en su lugar, configurarlo en un NUEVO div interno .left. Sencillo y funciona bien.
