Tachyons

Docs

/

Layout

/

Box Sizing

Version
<%= moduleVersion %>
Filesize
<%= moduleSize %>
Declarations
<%= moduleObj.declarations.total %>
Selectors
<%= moduleObj.selectors.total %>
Max. Specificity Score
<%= moduleObj.selectors.specificity.max %>
Size of Avg. Rule
<%= moduleObj.rules.size.average %>

The box model has been known to trip up a few people. This module should make things a bit easier.

While many people make fun of Microsoft's 'Internet Explorer' browser - the one thing that most css authors agree on is that it's the most favorable box model. Fortunately the box-sizing property is well supported now so we can fix the atrocity that is the box model that chrome, firefox, safari, and others have implemented in modern browsers.

While the * { box-sizing: border-box; } hack has become quite popular - not all elements (think form inputs) benefit from this box model. This module only applies the border-box model to certain elements as listed below. There is also a .border-box class you can apply to elements as needed.

The benefit of border-box as opposed to content-box (which is the default per the css spec) is that when you declare a width, that is the width of the element, regardless of how much border or padding you add to the element.

Examples

Default Content Box

This element has a thick border, a max-width class of mw5, and extra large horizontal padding and medium vertical padding.

Border Box

This element has a thick border, a max-width class of mw5, and extra large horizontal padding and medium vertical padding.

Border Box with no padding or border

This element has no border, a max-width class of mw5 and no padding. Notice which example it has the same width as.

Previous

White Space

Next

Spacing

Reference

MDN - Box Sizing
src/_box-sizing.css

<%= srcCSS  %>

<%= navDocs %>
<%= siteFooter %>