#border-box

🛠️ Controlando el Modelo de Caja: box-sizing al Rescate Para controlar el modelo de caja, primero debes entender cómo funciona el navegador. Hojas de Estilo del Agente de Usuario Cada navegador aplica su propia hoja de estilo de agente de usuario a los documentos HTML. Estas son reglas CSS predeterminadas que aseguran que el contenido sea legible y se comporte de manera sensata, incluso si no…

¿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…

Hello my friends!

I know, I know you know the "border" and its features.

But, as we all know, the space it fills is out of the area, meaning if you have a square of "50px" and a border of "5px"(all sides), it will be "60px". This is not to mention "padding", because if you have a "padding" of "5px"(all sides) in the same example, then the content would be "70px". Did you understand the problem?

via GIPHY

Would Stay:

"50px" of "width" and "height" + "10px" of "padding" and + "10px" of "border", totaling "70px" content.

To use the border as part of the content already exists and add no more pixels, the "box-sizing" border-box is used.

Use:

box-sizing: border-box;

Results:

CSS variables have been a thing for many years. Some of us may even recall the days of parsing CSS files as PHP to replace values. More recently (thankfully) we've employed more sane methods of abstracting values to variables by employing preprocessors such as SASS and mixin libraries like Bourbon.

With the advent of version 31, Firefox now supports native css variables out of the box. The syntax feels a bit clunky, but it's a huge step in the right direction.

If you have the latest and greatest from Firefox, you should see a pretty, styled version of Jan Reimers’ CodePen example below.

See the Pen CSS Variables in Firefox 31 - new syntax by Jan Reimers (@reimersjan) on CodePen.

Can you use it in the wild yet? Not really as Firefox is the only browser which supports CSS variables at this time, but watch this space.

Bonus tip

Like me, you probably implemented box-sizing: border-box the moment you learned about it, there was much rejoicing and you never looked back.

Recently I learned this little trick which uses inherit instead of simply making all page elements border-box by default. The benefit of this is that if you need a section of elements to be content-box (maybe you have a retro plugin, or maybe you just hate yourself) then you only need set that value on the outermost element of that section of markup and all the child elements are back to content-box too!

// Old school *, *:before, *:after { box-sizing: border-box; } // New hotness! html { box-sizing: border-box; } *, *:before, *:after { box-sizing: inherit; }

See the Pen eLaht by Andy Westmoreland (@awestmoreland) on CodePen.

Today i learned something interesting when it comes to creating layouts in CSS. When creating a layout with a defined width, padding and border your computed width is not what you originally defined as width on your css.

Your computed width is actually width + padding + border you defined in your css file. This becomes a problem if you wanted to create a box that it's 200px wide and when you see your rendered layout it's actually wider since padding and border were added to your defined width.

When creating layouts, the default box model the browser uses is the box-sizing property with the content-box value. If you wanted your computed width to be exactly what you set, you would have to use the box-sizing property with border-box set as it's value. You can set your document to follow the 'box-sizing : border-box' model with this code at the beginning of your CSS document:

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

When using border-box value the computed width equals to the content + padding + border. For example:

* { box-sizing: border-box; } .box { width: 200px; padding: 20px; border: 20px; }

The computer width for the code above will equal to 200px wide with padding and border applied. This means your content will be around 140px wide.

if we use the default box model example:

* { box-sizing: content-box; } .box { width: 200px; padding: 20px; border: 20px;

The computed width for the code will equal to 260px wide since your content is defined at 200px wide and both padding and border are added to your total computed width.

My primary goal is to teach you how the Box Model works in CSS when box-sizing with border-box. My secondary goal is to make you hungry.

Lets stack our boxes with candy bars. Margin will be a Hershey's Bar Border will be Nestle Crunch Bar Padding will be Twix Content will be KitKat, because its easiest to share. When we give stacks of boxes/ Candy bars, what people get is based on what you didn't eat. If you only gave a KitKat, Twix and Crunch Bar, there is no margin.

Happy new year !

For this first post of the year, I'd like to share a new css property that I just met today:

box-sizing: border-box;

What is it for ?

To explain it, I need to go back to basic knowledge. Here is a picture to help:

As you can see, an html element (let's talk about a div for the example) is set with 4 properties defining its size on your page:

width & height

padding

border

margin

Width & height are pretty self-explanatory.

Padding is the "margin" inside your div. It means the content of your div will adjust inside your width x height + padding.

Margin is the "margin" outside your div. It means it won't affect the content of your div but will affect the "neighborhood".

Border is the "margin" outside your div too. But this one is more specific than the previous one. It is used to apply effect such as "border-style: solid;". You can consider it as an alternative to "margin" (but for semantic reason, don't use it as margin). By the way, border is placed between padding and margin.

Back to box-sizing

Now that we know everything about these properties, we can explain box-sizing. As some of you may have think "So the width is not the actual width of my div ?!". Yes. W3C considers margin as "not part of the div".

But some of you may like to have a width that has really the width you set without considering padding or margin. That's what box-sizing is made for. 

If you did not completely understand, here is a helpful picture:

Great, right ?

Support

Chrome (any): box-sizing Opera 8.5+: box-sizing Firefox (any): -moz-box-sizing Safari 3: -webkit-box-sizing (unprefixed in 5.1+ versions) IE8+: box-sizing

Sources and helpful links

CSS-Tricks

W3schools