Play with Margin

Goal

• ⚡ Learn margin syntax

Margin - Individual Sides

margin-top: 50px;

margin-right: 30px;

margin-bottom: 50px;

margin-left: 80px;

Visit: https://margin-padding-demo.now.sh/

And edit element style by using chrome dev tools.

Margin - Shorthand Property

/* Apply to all four sides */

margin: 10px;

/* vertical | horizontal */

margin: 5px 10px;

/* top | horizontal | bottom */

margin: 1px 2px 2px;

/* top | right | bottom | left */

margin: 5px 1px 0 2px;

Margin "auto"

auto The browser selects a suitable margin to use. For example, in certain cases this value can be used to center an element.

https://developer.mozilla.org/en-US/docs/Web/CSS/margin