Drag the edges to resize the window.

In Projects, you can keep track of your progress as you go throught the tasks. Check each item as you complete it!

Code Editor
Web Browser

Margin I

So far, you've learned about the following aspects of the box model: dimensions, borders, and padding. The fourth and final aspect of the box model is margin.

The margin refers to the space directly outside of the box. You can adjust this spacing with the margin property.

p { border: 1px solid #23AD44; margin: 20px; }

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.

An understanding of the margin property is crucial in order to later understand element positioning in the browser.

Report a Bug
If you see a bug or any other issue with this page, please report it here.