La propiedad box-sizing indica cómo se calcula el ancho y alto de la etiqueta correspondiente. Tiene dos valores: content-box y border-box:
- content-box, el ancho y el alto se calculan teniendo en cuenta sólo el contenido, sin incluir el border y el padding. Es el valor por defecto.
- border-box, el ancho y el alto se calculan teniendo en cuenta el contenido y también el border y el padding. Es decir, el border y el padding están incluidos en el ancho y alto.
El caso de content-box lo hemos explicado en el punto anterior, ahora vamos a ver un esquema para ver el caso de border-box:
El esquema corresponde a la definición de un contenedor (por ejemplo div) con estos atributos:
div { box-size: border-box; width: 200px; border-width: 5px; padding: 20px; margin: 100px }
El espacio que debemos reservar en nuestro diseño de la página es de 400 px., que corresponden al width del contenido y al margin. Es decir, 200 px, que ocupa el contenido, más 100 px, por cada lado del margin. En este caso los 5 px. por cada lado del border, y los 20 px. por cada lado del padding, ya están incluidos en el width del contenido.
A continuación puedes ver un primer ejemplo con box-sizing: border-box y un segundo ejemplo con el valor por defecto, box-sizing: content-box.
El resto de valores son igual para ambos ejemplos: border-width: 5px; border-style: solid; border-color: royalblue; padding: 20px; width: 200px; margin-left: 100px; margin-right: 100px;
Observa la diferencia de anchura.
Ejemplo con box-sizing: border-box :
Ejemplo con box-sizing: content-box :
Cursos Informática Gratuitos Síguenos en: Facebook Sobre aulaClic Política de Cookies
© aulaClic S.L. Todos los derechos reservados. Prohibida la reproducción por cualquier medio.