Como Caja 2: superando el modelo
En el artículo donde explico de qué se trata y cómo nos afecta el modelo de caja al construir un layout con CSS, se pueden sacar algunas conclusiones, las que en realidad dejo bien claro: utilizar el reseteador universal, tratar de no definir anchos a los div‘s y el más importante, no darle padding al div u otro elemento contenedor (para no deformarlo). Con esas 3 simples reglas podemos superar bastante este inconveniente, pero me interesa entregar una recomendación para que se pueda sintetizar un poco nuestro layout y al mismo tiempo ahorrar un poco de código, logrando además más control sobre nuestra diagramación.
Un HTML con 2 columnas:
Y el CSS muy primitivo pero funcional:
Ver ejemplo funcionando{.verejemplo}
Como apreciarán, los contenedores encajan y no se desarma nada. Como se predijo funciona perfecto. Ahora, lo que se hará es darle padding al
y al
- para que se despegara un poco de los bordes, pero esto puede traer inconvenientes: ¿Qué pasa si tenemos más de un
? ¿Qué pasa con otros elementos que agreguemos,
, ,
? ¿Debemos darle el padding a todos siempre? Un lío tras otro… en ese caso, lo que haré será agregar otro div dentro de los contenedores, los que tendrán una class que tendrá solamente el padding que necesitamos. Así, este div rodeará todos los elementos necesarios para dar ese margen interior a nuestras cajas. El HTML modificado:
Y el estilo para esa modificación:
Y si en el caso que necesitáramos darle diferentes padding a cada caja, lo especificamos en el CSS:
Ver ejemplo final{.verejemplo}