Tachyons

Docs

/

Layout

/

Box Sizing

Version
2.1.0
Filesize
129 B
Declarations
1
Selectors
16
Max. Specificity Score
11
Size of Avg. Rule
1

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

/*

  BOX SIZING

  A saner box-model.
  Only applied to unqualified elements where this model makes sense.

  Apply .border-box where needed.

*/

nav,
main,
section,
article,
aside,
header,
footer,
div,
details,
summary,
form,
fieldset,
textarea,
input[type="text"],
input[type="tel"],
input[type="url"],
input[type="email"],
input[type="search"],
input[type="number"],
input[type="password"],
nav:before,
main:before,
section:before,
article:before,
aside:before,
header:before,
footer:before,
div:before,
details:before,
summary:before,
form:before,
fieldset:before,
textarea:before,
input[type="text"]:before,
input[type="tel"]:before,
input[type="url"]:before,
input[type="email"]:before,
input[type="search"]:before,
input[type="number"]:before,
input[type="password"]:before,
nav:after,
main:after,
section:after,
article:after,
aside:after,
header:after,
footer:after,
div:after,
details:after,
summary:after,
form:after,
fieldset:after,
textarea:after,
input[type="text"]:after,
input[type="tel"]:after,
input[type="url"]:after,
input[type="email"]:after,
input[type="search"]:after,
input[type="number"]:after,
input[type="password"]:after,
.border-box,
.border-box:before,
.border-box:after {
  box-sizing: border-box;
}



Docs

General

Debugging Images