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:

Dimensiones reales de una caja en CSS
- 202
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.
Sintaxis CSS básica. Cómo se escribe el CSS.
- 251
Escribir CSS es fácil. Es un lenguaje que no tiene sorpresas. En esta entrada se explica como se escribe una instrucción CSS.
Como centrar un texto mediante CSS y no con HTML
- 566
Hay ocasiones en las que necesitamos centrar un texto pero no hay manera. La forma correcta de hacerlo es mediante CSS.
Posicionamiento flotante de cajas. float: left | right | both; y propiedad clear
- 231
Apuntes de alumno y ejemplos de como usar la propiedad float y clear. Esta publicación forma parte del "tutorial css - apuntes de clase"
Menú horizontal con submenú desplegable horizontal mediante CSS
- 168
Ejemplo de menú horizontal con submenú desplegable horizontal mediante CSS. Incluye archivo descargable.
Introducción al CSS. Que significa Cascading Style Sheets.
- 208
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 horizontal de una caja con CSS
- 448
Ejemplo de como centrar horizontalmente una caja o contenedor en una página web y mediante CSS.
Diferencia entre visibility:hidden; y display:none;
- 154
Código css para ilustrar la diferencia entre el uso de visibility:hidden; y display:none; . Incluye ejemplo visual.
Maquetar una página de prestashop 1.6 con bootstrap
- 483
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...
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.
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.