# CSS Box Model

* Every HTML element is, at its most basic form, a box.
* The box model is used to describe an element’s dimensions and structure.
* Three important properties control the space that surrounds each HTML element: `padding-box`, `margin-box`, `border-box` and the `content-box`.
* The `content box` is the inner-most property of the box model.
* It is defined by the `height` and `width` properties in CSS. By default, the content box is defined by whatever is inside the element. It will expand and contract depending on its content.

> Percentage units can be used to create flexible elements based on the size of the parent element. Lower and upper limits can then be defined using min- and max- properties.

* -nagtive values in padding is not allowed.
* border can set using lengths or %
* border width can be keywords or length, - values or % is not allowed.
* deafult value for border is medium
* if border color is not specified it will take the text color property
* margin can take negative values
* margin: auto, browser calulates the margin
* By default the box width and height is the same as the content it hold, but we can change that with the width and height.
* Both can accept lenghts as pixels, ems or %
* Using % , makes the box size relative to the size of its containing box
* em values make the size relative to it's font size.
* boxsizing alters the way width and height are calculated.
* The value border-box forces the padding and bordsers into the width and height `box-sizing: border-box`
*