Tuesday - Box Sizing

Box sizing is done to control the ways in which margins, borders, and padding affect the elements next to them. By default, when you define the height and width of your element you are only defining the height and width of the content; the padding, border, and margins all add to that height and width. In CSS, it is common to apply box sizing to everything in your HTML. You'd do so as follows:

  html { box-sizing: border-box ;}
  *, *:before, *:after { box-sizing: inherit ;}

There are also a couple other values you could use (content-box and padding-box) but they are rarely selected. Stick to the golden standard (above) and you'll be happiest. The reason why you should add in the universal selectors (the ones represented by asterisks) is to ensure that if you choose to do something other than border-box somewhere local within your CSS, you don't have to worry about your reset overwriting it.

For additional explanation of box sizing, I encourage you to check out Marie Moseley's essay on box sizing; it is dated (2010) but it still contains a clear explanation of a vexing topic.