thoopal/box-model-lab

[CSS]

The Box Model: Dave's Burgers

(h/t to Codecademy for putting together this great lab)

In this project, you will follow step-by-step instructions to fix a fictional restaurant's website. All of the HTML and most of the CSS is intact, however, the box model properties have yet to be set.

In order to complete this project, you must know how to set an element's height, width, padding, border, and margin using CSS.

Instructions

• please fork and clone this project to your own account

Tasks

1. Add width values to the following elements:

• Set the width of images in nav to 180 pixels.
• Set the width of elements with class button to 200 pixels.
• Set the width of ul.nutrition li elements to 200 pixels.

2. Add height values to the following elements:

• Set the height of elements with class content to 500 pixels.
• Set the height of elements with class header to 320 pixels.

3. Add padding values to the following elements:

• Set the padding of .header h1 elements to 20 pixels.
• Set the padding of elements with class button to 20 pixels.
• Set the padding of ul.nutrition elements to 40 pixels.
• Set the padding of ul.nutrition li elements to 10 pixels of top and bottom padding and 20 pixels of left and right padding.

4. Add margin values to the following elements:

• Set the margin of nav span elements to 10 pixels of top and bottom margins and 0 pixels of left and right margins.
• Set the margin of nav img elements to 0 pixels of top and bottom margins, and the left and right margins to set automatically.
• Set the margin of elements with class content to 10 pixels of vertical margins, and the horizontal margins to set automatically.
• Set .header h1 elements to have 0 pixels of vertical margins, and the horizontal margins to set automatically.
• Set elements of class button to 40 pixels of vertical margins, and the horizontal margins to set automatically.
• Set ul.nutrition li elements to 3 pixels of bottom margin.
• Set .content .body elements to have zero pixels of vertical margin, and the horizontal margins to set automatically (i.e. centered on the page).

5. Give elements with the class button a 1 pixel, solid blue border.