Unidad 10. CSS. Unidades. Color. Margen. Fondo. Borde (XXII)



10.19. Propiedad box-sizing

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:

Modelo de caja CSS. Anchura total box-sizing: 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 :

Párrafo uno. Lorem ipsum dolor sit amet, consectetur adipisicing elit. eligendi porro ius soluta in voluptates voluptatem, nesciunt dolorem obcaecati nemo eligendi porro iusto, earum debitis. Lorem ipsum dolor sit amet, consectetur adipisicing elit.

Ejemplo con box-sizing: content-box :

Párrafo uno. Lorem ipsum dolor sit amet, consectetur adipisicing elit. eligendi porro ius soluta in voluptates voluptatem, nesciunt dolorem obcaecati nemo eligendi porro iusto, earum debitis. Lorem ipsum dolor sit amet, consectetur adipisicing elit.

 


Enero-2019 (V 2.0)
Pág. 10.22
Atrás Inicio Adelante






Página inicial  Cursos Informática Gratuitos

Síguenos en:   Facebook ,    G+            Sobre aulaClic            Política de Cookies


© aulaClic S.L. Todos los derechos reservados. Prohibida la reproducción por cualquier medio.