Skip to Content
Learn
Boundaries and Space
More Margins

The margin property creates space on all sides of a page element. It’s also possible to set separate margin spacings on each side of an element.

Additional margin properties:

  1. margin-top: Sets the top margin.

  2. margin-bottom: Sets the bottom margin.

  3. margin-left: Sets the left margin.

  4. margin-right: Sets the right margin.

Note: Below we will change margin properties for a div that encloses HTML figure elements. Figures are used to organize visuals, such as photos and diagrams.

Instructions

1.

In index.html, figures with the class gallery-item are contained inside a div with a class gallery.

In main.css, locate the .gallery class selector. Set the margin-top property to 20px.

Run your code and notice the change in the web browser: the .gallery div now has more top-margin space.

Folder Icon

Take this course for free

Already have an account?