So far you’ve learned about the following components of the box model: content, borders, and padding. The fourth and final component of the box model is margin.
Margin refers to the space directly outside of the box. The margin property is used to specify the size of this space.
The code in the example above will place 20 pixels of space on the outside of the paragraph’s box on all four sides. This means that other HTML elements on the page cannot come within 20 pixels of the paragraph’s border.
If you want to be even more specific about the amount of margin on each side of a box, you can use the following properties:
margin-topmargin-rightmargin-bottommargin-left
Each property affects the margin on only one side of the box, providing more flexibility in customization.
In the example above, only the right side of the paragraph’s box will have a margin of 15 pixels. It’s common to see margin values used for a specific side of an element.
Instructions
Set the top margin of p elements to 60 pixels.
Look at the three red boxes at the bottom of the web page. These elements are anchor elements of class .share. Set these .share a elements to have a margin of 10 pixels.