Box Model Exercise

In this exercise you'll practice using the CSS box model. For reference, see Duckett or the the Mozilla Box Model reference.

To do:

  1. Give the ul a border and a background color.
  2. Make sure there's space between the list items and the border.
  3. Why is the ul so wide? Make it less wide.
  4. Use the Inspector to figure out how the dot next to each list item is positioned. Why is it closer to the left border than you would expect?
  5. Add a bottom border to the h3.
  6. Adjust the margin and/or padding of the h3 so that the bottom border is farther from the text.
  7. Increase the spacing between the h3 and the ul./li>
  8. Modify the CSS to create something you think looks good.

Birds to See: