Margin - Individual Sides

<pre><code>p {
  margin-top: 100px;
  margin-bottom: 100px;
  margin-right: 150px;
  margin-left: 80px;
}</code></pre>
  • CSS has properties for specifying the margin for each side of an element: margin-top, margin-right, margin-bottom, margin-left.
  • All the margin properties can have the following values: auto (the browser calculates the margin), length (specifies a margin in px, pt, cm, etc.), % (specifies a margin in % of the width of the containing element), inherit ( specifies that the margin should be inherited from the parent element).
  • Negative values are allowed.
  • If the margin property has three values: margin: 25px 50px 75px; (top margin is 25px, right and left margins are 50px, bottom margin is 75px).
  • If the margin property has two values: margin: 25px 50px; (top and bottom margins are 25px, right and left margins are 50px).

Related concepts

Margin - Individual Sides

Margin - Individual Sides — Structure map

Clickable & Draggable!

Margin - Individual Sides — Related pages: