Curso de Desarrollo Web Online 2016

Toma las primeras clases gratis

La característica principal de esta propiedad es poder modificar el ancho y el alto de los elementos con respecto al modelo de caja.

Y te preguntaras. Pero si puedo definir el alto y el ancho de mi caja con width y height. Y tienes toda la razón. Esa es la forma normal, común y corriente. Pero debes tener en cuenta que en el caso de que quieras añadir un padding, margin o un border el tamaño tanto en el ancho como en el alto de tu elemento ya no serán los que tu indicaste, sino que aumentaran.
¿Como aumentaran?
Aumentaran ya que las propiedades por defecto del modelo de caja indican que la suma del ancho que le diste a tu elemento junto con el padding, el margin y el border será el nuevo valor de ancho de tu elementos

.elemento{
	width: 100px;
	height: 100px;
	padding: 10px;
	margin: 10px;
	border: 10px solid black;
}

Según lo las propiedades por defecto este elemento al sumar todo su ancho interpretado por el navegador será de 160px

<h3>Y talvez tu no quieras eso, para eso existe la propiedad box-sizing**.</h3>

Esta como lo había mencionado anteriormente te ayuda definir o modificar la interpretación por el navegador de las dimensiones para tu caja.

border-box

Es posiblemente la propiedad más usada, la cual sirve para que su ancho especificado sea el ancho total. No cuenta ni border, padding ni margins lo cual hace muy fluido la posición de elementos

padding-box

Esta propiedad reduce su uso, pero suele ser muy practica para ciertos casos y “ojito ojito” dice leonidas esteban que solo esta soportada por Firefox, pero no te preocupes, no es que la necesites de a mucho.
esta propiedad tendrá en cuenta dentro de sus dimensiones el padding, es decir que en su ancho además de los valores especificados se sumara su padding dejando por fuera a borde y a el margin

content-box

Esta propiedad es el valor inicial box-sizing es decir que su ancho será igual a los tres elementos mencionados anteriormente. es casi lo mismo que no declarar la propiedad de box-sizing a un elemento.

*Gracias por su atención, espero que les haya servido, y cualquier comentario o critica constructiva será bien aceptada en los comentarios.

Curso de Desarrollo Web Online 2016

Toma las primeras clases gratis

0 Comentarios

para escribir tu comentario

Artículos relacionados