Dimensiones reales de una caja en CSS

Dimensiones reales de una caja en CSS

Print Friendly, PDF & Email
Dimensiones reales de una caja en CSS
5 (100%) 1 voto

Esta entrada supone que tienes un conocimiento previo del modelo de cajas.

Tal vez sería oportuno darle un repaso a esta publicación.

Anteriormente hemos visto que cualquier etiqueta html tiene como símil una caja de zapatos con un ancho o altura, relleno, borde y margen.

Pudiendo ser los rellenos, bordes y márgenes: superiores, derechos, inferiores e izquierdos.

El conjunto de todas las propiedades anteriores definen la altura y el ancho real de una caja html.

2 conceptos importantes que nos ayudarán a entender porqué cuando estamos aprendiendo a menudo nuestros diseños web «se rompen» cuando distribuimos el espacio de las columnas de un diseño web.

Ancho real de una caja

El ancho total por defecto es la suma de:

margin-left + border-left + padding-left + width + padding-right + border-right + margin-right

El problema de muchos diseñadores noveles es que a menudo ponen width 75% o 100% y se olvidan de que el padding, el border y el margin harán que en realidad tengan valores superiores. Por ejemplo un 78% o un 105%.

En la caja de la imagen contigua el ancho real es:

10 + 1 + 10 + 200 + 10 + 1 + 10 = 242px

Altura real de una caja

El ancho total por defecto es la suma de:

margin-top + border-top + padding-top + height + padding-bottom + border-bottom + margin-bottom

En la caja de la imagen contigua la altura real es:

10 + 1 + 10 + 50 + 10 + 1 + 10 = 92px

¿Que sucede con los elementos en línea?

Seguramente habrás observado comportamientos no esperados cuando das propiedades a un elemento en línea. Por ejemplo un enlace.

Recuerda que los elementos en línea no respetan el width ni el height. En su defecto los valores que encontrarás son los que por defecto le da el navegador.

Tampoco respetan el margin-top y el margin-bottom. En su defecto las cajas se superponen.

Si comparas un elemento inline-block on un elemento inline podrás apreciar que la altura y el ancho son distintos de los esperados.

De este modo el elemento en línea mide 62px y el elemento inline-block 92px (sin contar en los dos casos los márgenes).

elemento en linea comparado con elemento inline-block
Un bloque en línea no respeta el width, el height, el margin superior y el inferior indicados en el CSS.

¡Hola!

Querido lector,

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

Nos leemos mañana, como siempre, con un nuevo contenido en el blog.

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.