#box-model

¿Qué es el modelo de caja? Imagina cada elemento de tu página web como una caja. Esta caja tiene un contenido (el texto o imagen), un borde, un relleno y un margen. El modelo de caja es la forma en que CSS describe y posiciona estas cajas en la página. Comprender este concepto es fundamental para crear diseños web precisos y personalizados. Como ya hemos visto, el modelo de caja es la…

coolio!

One of my least favorite parts about layout with CSS is the relationship of width and padding. You're busy defining widths to match your grid or general column proportions, then down the line you start to add in text, which necessitates defining padding for those boxes. And 'lo and behold, you now are subtracting pixels from your original width so the box doesn't expand.

Ugh. If I say the width is 200px, gosh darn it, it's gonna be a 200px wide box even if I have 20px of padding. So as you know, this is NOT how the box model has worked for the past ten years. Wikipedia has a great history of this box model.

Anyway, I have a recommendation for your CSS going forward:

/* apply a natural box layout model to all elements */ * { -moz-box-sizing: border-box; box-sizing: border-box; }