Box Model: margin

Category: Web Development & Approved by devanshchakravarti83@gmail.com 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:
margin-top
margin-right
margin-bottom
margin-left

box-model

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.
Example:
“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
QWGGyKj
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


Comments

Share your thoughts about this post
web counter