¿Cuáles serán las dimensiones reales de las cajas css?

¿Cuáles serán las dimensiones reales de las cajas css?

¿Cuantas veces estás aprendiendo css y al maquetar una columna te salta al siguiente nivel?

Empiezas a jugar con los porcentajes y… no hay manera. Demasiado ancho. Demasiado estrecho.

Evidentemente el css ha evolucionado hacia sistemas de rejillas dónde esto se soluciona pero primero hay que empezar la casa por los cimientos y entender el importante concepto del ancho real de una caja en css.

La respuesta la encontramos en el modelo de cajas de css.

Te será de utilidad repasar estos conceptos.

Pasemos a hacer un pequeño ejercicio.

Enunciado

Se indican a continuación los estilos que aplican a dos cajas diferenciadas.

Detalla cuál es el ancho y la altura real de cada una de las cajas.

/*ejercicio 1 */

.caja-1{
	width:100px;
	height:30px;
	padding:20px 30px 10px;
	border:1px solid #000;
	margin:20px 10px;
}
.caja-2{
	box-sizing:border-box;
	width:100px;
	height:30px;
	padding:20px 30px 10px;
	border:1px solid #000;	
	margin:20px 10px;
}

Solución del ejercicio

Las 2 cajas se ven afectadas por las mismas instrucciones width, height, padding, border y margin.

No obstante la segunda caja se ve influenciada por la propiedad box-sizing.

La propiedad box-sizing adapta el width disponible para contenido para que la suma de border + width disponible final + padding sea igual al width especificado en el css.

Tanto es así que en la segunda caja el width final se mantiene a 100px sin embargo se mantiene el padding. Al ser este suficientemente grande el texto no cabe en una línea y el navegador se ve forzado a romperlo en 2 líneas que sobresalen de la caja.

efecto de aplicar box-sizing
La primera caja no tiene box-sizing. La segunda si.

Ejercicio 1

border-left (1px) + padding-left (30px) + width (100px) + padding-right (30px)+ border-right (1px) = 162px de ancho real a los que incluir el margin-left y el margin-right si lo que queremos medir es el espacio ocupado.

border-top (1px) + padding-top (20px) + height (30px) + padding-bottom (10px) + border-bottom (1px) = 62px de altura real a los que incluir el margin-top y el margin-bottom si lo que queremos medir es el espacio ocupado.

Ejercicio 2

Todo se recalcula para que el width final real sea 100px y el height 30px

El width disponible es igual a width (100px) – border-left (1px) – padding-left(30px) – padding-right(30px) – border-right(1px) = 38px

El height disponible es igual a height (30px) – border-top (1px) – padding-top(20px) – padding-bottom(10px) – border-top(1px) = -2px

No puede haber un valor negativo. El texto si no se dice lo contrario necesita 18px de espacio. Todo ello hace que el navegador ponga como puede el contenido y por ello se genera el efecto de que salta fuera de la caja dibujada. No cabe.

¡Hola!

Querido lector,

Este es un interesante ejercicio para entender de una vez por todas box-sizing.

¡Espero que te haya sido de utilidad!

¡Si te ha gustado este contenido te animo a seguirme en mi perfil de empresa de Linkedin!

¿Te ha gustado esta publicación?

¡Valora sobre 5 estrellas esta publicación!

Puntuación media / 5. Votos:

Todavía no hay votos. Sé el primero en valorar la entrada.

Si te ha gustado este contenido...

¡Sígueme en las redes!

Vaya, parece que hay puntos a corregir

¿Me ayudas a mejorar?

Francesc Ricart
hola@francescricart.com

Aprender y enseñar. Enseñar y aprender. En el ámbito docente soy docente ocupacional. En el ámbito profesional consultor web. Ofrezco servicios de mejora continua y mantenimiento web. ¿Qué quieres aprender hoy? Encontraréis más acerca de mi en la página sobre mi

No hay comentarios

Escribir un comentario

  Acepto la política de privacidad

Responsable: FRANCESC RICART MUÑOZ.

Finalidad: Gestionar los comentarios que realizas en este blog.

Destinatarios: No se cederán datos a terceros, salvo obligación legal.

Derechos: Tienes derecho a acceder, rectificar y suprimir los datos, así como otros derechos, como se explica en la política de privacidad.