CSS Margin

 



CSS Margins

Margins are used to create space around elements, outside of any defined borders

With CSS, you have full control over the margins. There are properties for setting the margin for each side of an element (top, right, bottom, and left).

Margin - Individual Sides

CSS has properties for specifying the margin for each side of an element:

  • margin-top
  • margin-right
  • margin-bottom
  • margin-left
p{
margin-top: 100px;
margin-bottom: 100px;
margin-right: 150px;
margin-left: 80px;
}

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

Shorthand Property

margin: 25px 50px 75px 100px;

  • top margin is 25px
  • right margin is 50px
  • bottom margin is 75px
  • left margin is 100px
p{
    margin: 25px 50px 75px 100px;
}

If the margin property has three values:

margin: 25px 50px 75px;

p{
    margin: 25px 50px 75px;
}

top margin is 25px

right and left margins are 50px

bottom margin is 75px

margin: 25px 50px;

p{
    margin: 25px 50px;
}

top and bottom margins are 25px

right and left margins are 50px

margin: 25px;

p{
    margin: 25px;
}

All four margins are 25px

Related Posts:

  • CSS Outline CSS OutlineAn outline is a line drawn outside the element's border.CSS has the following outline properties:outline-styleoutline-coloroutline-wi… Read More
  • CSS Height, Width and Max-widthThe CSS height and width properties are used to set the height and width of an element.The CSS max-width property is used to set the maximum width of … Read More
  • Text PropertyCSS Text ColorThe color property is used to set the color of the text.The color is specified by:a color name - like "red"a HEX value - like "#ff0000"a… Read More
  • CSS Box Model  In CSS, the term "box model" is used when talking about design and layout.The CSS box model is essentially a box that wraps around every H… Read More
  • CSS Padding CSS works on a box model structure, where elements are packed according to the sequence of the imageThe padding property defines the space betwe… Read More

0 Comments:

Post a Comment

Do leave your comments