The Box Model

Currently at The Flatiron School we are learning HTML and CSS, so I decided to blog about the box model because it's a very important part of HTML.

The box model is based on every element being a rectangular box that can have padding, margin, and border.  Here is an example:

The element with it's content are surrounded by a padding, border, and margin.  All make up the box model.

Margin - the margin is invisible and is used to give the element space from other elements on the page. Margin properties can be margin-top, margin-bottom, margin-left, and margin-right.
Ex:

Border - border creates a frame around an element. Border needs a width, style, and color. Border properties can be border-top, border-bottom, border-left, and border-right. Ex:

Padding - padding provides spacing within an element.  Padding properties can be padding-top, padding-bottom, padding-left, and padding-right. Ex:

To calculate the total width of an element we would add margin-right + border-right + padding right + width + margin-left + border-left + padding left.
To calculate the total height of an element we would add margin-top + border-top + padding top + height + margin-bottom + border-bottom + padding bottom.