Box Model Styling

One of the trickier bits of CSS to master early on is styling of box model elements. Here are some of the key properties you will want to set:

display

you have 3 options with display: block, inline, and none; block stacks display boxes vertically, inline stacks boxes horixontally, and none prevents the content from being rendered at all by the Web browser

height

height can be set for any box element (text or images) using absolute (for example, 10px) or relative (for example, 2em or 20%* distances from top to bottom

margin

margins exist outside the borders of every box element; setting margin:auto; will center the box element horizontally, but you can also set margin size the same way you adjust height or width sizes

max-width

this property ensures that individual elements will never exceed what you set as the maximum width here

TRouBLe

not actually a property, this is a CSS coding mnemonic (memory aid) to remind you that box model spacing always goes Top, Right, Bottom, Left (clockwise) so that you can set all four sides in a single line of code; if a box model property only has two values then the first value sets both top and bottom and the second value applies to both the left and the right

width

width can be set for any box element (text or images) using absolute (for example, 10px) or relative (for example, 2em or 20%* distances from left to right