03 Sep Dimensiones reales de una caja en CSS
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).
¡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.
No Comments