WEB DEVELOPER SITE
HTMLCSSJAVASCRIPTSQLPHPBOOTSTRAPJQUERYANGULARXML
 

CSS Margins


CSS Margin Properties

The CSS margin properties are utilized to produce space around elements.


CSS Margins

The CSS edge properties set the span of the blank area OUTSIDE the border.


Margin - Individual Sides

CSS has properties for determining the edge for each side of an element:

  • margin-top
  • margin-right
  • margin-bottom
  • margin-left

All the edge properties can have the accompanying values:

  • auto - the program computes the margin
  • length - determines an edge in px, pt, cm, etc.
  • % - determines an edge in % of the width of the containing element
  • inherit - determines that the edge ought to be acquired from the parent element

The following precedent sets distinctive edges for every one of the four sides of a <p> element:

Example

p {
    edge top: 100px;
    edge base: 100px;
    edge right: 150px;
    edge left: 80px;
}
Try it yourself »

The following precedent gives the left edge a chance to be acquired from the parent element:

Example

div.container {
    outskirt: 1px strong blue;
    edge left: 100px;
}

p.first {
    edge left: inherit;
}
Try it yourself »

Margin - Shorthand Property

To abbreviate the code, it is conceivable to determine all the edge properties in one property.

The margin property is a shorthand property for the accompanying individual edge properties:

  • margin-top
  • margin-right
  • margin-bottom
  • margin-left

Example

p {
    edge: 100px 150px 100px 80px;
}
Try it yourself »

If the margin property has four values:

  • margin: 25px 50px 75px 100px;
    • top edge is 25px
    • right edge is 50px
    • bottom edge is 75px
    • left edge is 100px

If the margin property has three values:

  • margin: 25px 50px 75px;
    • top edge is 25px
    • right and left edges are 50px
    • bottom edge is 75px

If the margin property has two values:

  • margin: 25px 50px;
    • top and base edges are 25px
    • right and left edges are 50px

If the margin property has one value:

  • margin: 25px;
    • all four edges are 25px

Use of The auto Value

You can set the edge property to auto to on a level plane focus the component inside its container.

The component will at that point take up the predetermined width, and the rest of the space will be part similarly between the left and right margins:

Example

div {
    width: 250px;
    edge: auto;
    outskirt: 1px strong #a10cb5;
}
Try it yourself »