Box Model: margin

Category: Web Development & Approved by On February-11-2021 15:29:20

Box Model: Margin Property

Any element margin area is set by margin property. It is the outermost layer of box-model. The top and bottom margins have no effect on non-replaced inline elements, such as <span> or <code>. Margin creates an extra space around the element.
The margin Its syntax is: margin: <length> <percentage> value;
The margin is shorthand of:


Values description:

  • <length>
    It is used to set the fixed value of margins.

  • <percentage>
    Margins will be relative to the width of the containing blocks in percentage

  • auto
    margins is automatically defines by the browser for specified element and sometimes it is used to align element center.

Let see a syntax for all values of width-color property.
“Global value”
margin: intital;
margin: inherit;
margin: unset;

margin: 50px; apply in all direction
margin: 5em 10em; horizontal | vertical
margin: 20% auto 15%; top | right and left | bottom
margin: 10px 20px 30px 40px; top | right | bottom | left

Code Example:

See the Pen
by Dev-9908 (@dev-9908)
on CodePen.

We have made blog on CSS tutorial from basic, if you haven’t read them so Click Here


Share your thoughts about this post
web counter