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
Valora esta entrada
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.

Entradas relacionadas:

Concepto de herencia en CSS
- 161
¿Imaginas tener que especificar una por una los estilos a cada una de las etiquetas? El concepto de CSS nos ayuda a optimizar código. Entender sus propiedades nos puede ayudar mucho a ser mejores maqu...
Introducción al CSS. Que significa Cascading Style Sheets.
- 135
Se explica que es el CSS, que significa en realidad el acrónimo y porqué se le llama así y hacemos una primera toma de contacto con este lenguaje web.
Ejemplo de centrado vertical y horizontal con CSS
- 51
Ejemplo explicado sobre como centrar verticalmente y horizontalmente una caja dentro de otra mediante position relative y absolute.
Tipografía CSS: como usar web safe fonts y tipografías personalizadas.
- 227
La sal es a la cocina lo que las tipografías son al mundo web. Debemos conocerlas y usarlas con conocimiento. En esta entrada se explica que CSS se debe escribir para hacerlo posible.
Modelo de cajas CSS. Ancho, altura, relleno, borde y margen
- 246
El modelo de cajas nos permite definir mediante CSS las propiedades físicas de espacio a una etiqueta html que esté dentro del body. En esta publicación se habla del ancho, altura, relleno, borde y fo...
Como mezclar CSS y HTML. Acoplamiento CSS
- 158
Existen 3 mecanismos para mezclar html y css. Veamos como se hace.
Unidades de medida absolutas y relativas en CSS
- 166
¿Como se define el tamaño de cada uno de los elementos de una página web? En CSS podemos encontrar medidas absolutas y relativas. Veamos a que equivale cada una.
Ejemplo de creación de menú horizontal en CSS: inline-block y float
- 44
Ejemplo dónde se plantean dos estrategias distintas para dar estilos a un en menú horizontal. La primera con inline-block. La segunda con float.
Diferencia entre visibility:hidden; y display:none;
- 35
Código css para ilustrar la diferencia entre el uso de visibility:hidden; y display:none; . Incluye ejemplo visual.
Posicionamiento mediante CSS de etiquetas html (cajas) en un documento web
- 56
Ejemplos prácticos y visuales dónde se muestran los posicionamientos static | absolute | relative | fixed | sticky. Incluye código CSS y HTML
Francesc Ricart
hola@francescricart.com

Soy un ingeniero industrial a quién le apasiona aprender y enseñar. En el mundo del marketing online he encontrado una de mis pasiones. Ejerzo como docente ocupacional y privado para empresas. Y también hago consultoría web para PIMES, autónomos y otros emprendedores como yo. Ayudo a las empresas en cualquier temática relacionada con su presencia digital y herramientas web. Aunque mi especialidad es el posicionamiento en buscadores (SEO). A nivel de formación lo que más feliz me hace es que un alumno haga de mi pasión una forma de vida y le ayude a encontrar trabajo. A nivel de negocios ayudo a empresarios a desenvolverse con soltura en el mundo digital y les animo a hacer cada vez más cosas que nunca hubieran imaginado que ellos también podían hacer. En este camino les ayudo haciendo todo aquello dónde ellos no llegan y crecemos juntos. 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.