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:

Ejemplo de menú vertical con submenú horizontal mediante CSS
- 203
Código html y css de como crear un menú vertical con un submenú horizontal.
Unidades de medida absolutas y relativas en CSS
- 324
¿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.
Box Sizing, como modificar el modelo de cajas convencional
- 207
¿Se rompen las columnas de tu web al redimensionar el ancho de tu navegador? En esta publicación hablamos de box-sizing con un ejemplo real.
La propiedad overflow
- 117
Resumen de uso de la propiedad de overflow de CSS. Apuntes de teoría del curso IFCD0110 del curso confección y publicación de páginas web.
Maquetar una página de prestashop 1.6 con bootstrap
- 482
Maquetar páginas en Prestashop 1.6 con tablas es un deporte de riesgo para implementadores anclados en el pasado. En esta entrada te muestro un ejemplo sencillo y sin demasiadas complicaciones para qu...
Cuidado con los tutoriales pdf obsoletos sobre html, css y javascript
- 60
En internet se encuentra mucho material de gran calidad para aprender lenguajes como html, css, y javascript. ¿Pero todos los pdf sirven?
Ejemplo de centrado horizontal de una caja con CSS
- 445
Ejemplo de como centrar horizontalmente una caja o contenedor en una página web y mediante CSS.
LibrosWeb ahora es UniWebSidad
- 204
LibrosWeb, una de las mejores referencias en Internet para aprender web, se ha reciclado tras 12 años de existencia. ¡Mi enhorabuena!
Posicionamiento mediante CSS de etiquetas html (cajas) en un documento web
- 176
Ejemplos prácticos y visuales dónde se muestran los posicionamientos static | absolute | relative | fixed | sticky. Incluye código CSS y HTML
Guía rápida para crear botones personalizados con CSS
- 104
Hacemos un repaso rápido a :hover :active y las propiedades box-shadow, border-radius, cursor y background para estilizar botones.
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.