Box Sizing, como modificar el modelo de cajas convencional

Box Sizing, como modificar el modelo de cajas convencional

Print Friendly, PDF & Email
Box Sizing, como modificar el modelo de cajas convencional
Valora esta entrada
¿Te ha pasado que todos los width de tu página suman 100% y sin embargo las columnas te saltan de nivel?

Esto se debe a que por defecto las dimensiones reales de una caja no son estrictamente las indicadas por width.

Incluyen por defecto el padding, el border y el margin.

¿Entonces existe alguna forma de maquetar que sea un poco más fiable en cuanto a los anchos?

Para que sirve la propiedad Box Sizing

La propiedad box-sizing de CSS puede tener los valores

  • content-box
  • border-box

La propiedad content-box es la que cualquier caja tiene asignada por defecto. Si no se dice lo contrario es la que prevalece. Tal vez sea un buen punto para repasar  las dimensiones reales de una caja con esta publicación.

La propiedad border-box recalcula el ancho de una caja para que el width sea la estrictamente la suma de border + padding + ancho o altura que sea necesario para que se cumpla.

border-box no incluye los márgenes.

Ejemplo de uso de border-box y content-box

Con un ejemplo se entiende mucho mejor.

Vamos a dividir una hoja en 3 columnas y compararemos el diseño con el uso de {box-sizing: border box;} y {box-sizing: content-box;}

box-sizing:content-box;

Ejemplo de diseño CSS roto
box-sizing:content-box (comportamiento por defecto)

En el código css en primer lugar se han reseteado los margin y los padding de todas las cajas del documento mediante un selector universal.

Para eliminar el espacio que queda entre espacios bloque se ha usado la propiedad font-size:0; (si lo escribes paso a paso verás a que me refiero)

No hacia falta escribir box-sizing:content-box porqué es el comportamiento por defecto.  Pero para claridad del ejemplo se ha explicitado.

En cuanto a los divs se les ha asigando una clase de nombre division.

La clase división indica que el ancho debe ser del 33% y se ha indicado un padding y un border en medidas absolutas (px).

Para que las columnas se apilen se han modificado los div de elementos bloque a elementos bloque en linea.

Fijaros que el ancho real es superior al 33% y que por tanto la tercera columna no cabe en la fila y salta de nivel.

box-sizing:border-box;

división responsive 3 columnas
box-sizing:border-box;

En este caso el código es el mismo a excepción de la línea 12.

Fijaros que ahora se ha modificado las dimensiones reales de las cajas y ahora si ocupan un 33% cada una.

Como resultado queda un 1% por ciento del espacio disponible no ocupado.

Este método tiene la ventaja que no importa el ancho del dispositivo el espacio siempre estará repartido en 3 columnas y el diseño no se romperá nunca.

Observar que en ningún caso se ha usado ningún margin.

¡Hola!

Querido lector,

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

Entradas relacionadas:

Como crear columnas con CSS de forma fácil mediante Inline-block y float
- 40
Dado un mismo código html como crearíamos columnas en un documento web utilizando floats versus haciéndolo con inline-block;
Concepto de cascada en CSS
- 142
En CSS existen una serie de normas que dan prioridad a las instrucciones que afectan a cada etiqueta html en función de su importancia, grado de especificidad y orden de aparición. Veámoslo.
Pseudo Clases :link, :active, :hover y :visited
- 35
Las pseudoclases sirven para definir estados en los que se encuentra una etiqueta html. Vemos las pseudoclases link, active, hover y visited.
Ejemplo de centrado vertical y horizontal con CSS
- 53
Ejemplo explicado sobre como centrar verticalmente y horizontalmente una caja dentro de otra mediante position relative y absolute.
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.
Dimensiones reales de una caja en CSS
- 113
Las dimensiones reales de una caja, por defecto, no son las que indica el width. Veamos como se calculan y en que nos puede ayudar aprenderlo.
Modelo de cajas CSS. Ancho, altura, relleno, borde y margen
- 247
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...
Sintaxis CSS básica. Cómo se escribe el CSS.
- 130
Escribir CSS es fácil. Es un lenguaje que no tiene sorpresas. En esta entrada se explica como se escribe una instrucción CSS.
Concepto de herencia en CSS
- 164
¿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...
Posicionamiento mediante CSS de etiquetas html (cajas) en un documento web
- 57
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.