How to use Margins Padding and Borders to create a menu for your assignment:

PADDING

This outer Div has a pink background, is 400px by 400px, it has a padding of 50px, The Div inside it has a width of 400px by 400px and has a blue background, you'll notice that the (left and right) and (top and bottom) spaces around the border are uneven. This is because we didn't subract the border from our calcuations.

This test black div is exactly 500px wide

In this one we accounted for the border of 10px (10px total each side)

MARGIN

Margin is used to space the outsisde of elements, for example if we have these three divs. (important to note: Margins do NOT resize elements, it just creates space around these elements.

margin:auto

margin:200px

margin:100px

margin:100px

BORDERS

Borders have different styles: solid, dotted, dashed, double. It has Three standard widths: thin, medium, thick (or you can use any px value)

border-style:solid; border-width: thick; border-color:blue;

border-bottom: double 15px red;

border: dotted 20px pink; border-left:none; border-right:none