Tutorials Point


  CSS Home

  CSS Reference
  Pseudo Classes & Elements

Copyright © 2014 by tutorialspoint



  Home     References     Discussion Forums     About TP  

CSS - margin


previous next AddThis Social Bookmark Button


Advertisements

Description:

The margin property is a shorthand property which sets the width of the margins on all four sides of an element.

Possible Values:

  • length: Any length value.
  • percentage: The margin's width is calculated with respect to the width of the element's containing block.
  • auto: Sets the values for all four margins to be automatically calculated.

Applies to:

All the HTML elements

DOM Syntax:

object.style.margin="5px"

Example:

Here is the example:

<p style="margin: 15px; border:1px solid black;">
all four margins will be 15px
</p>

<p style="margin:10px 2%; border:1px solid black;">
top and bottom margin will be 10px, left and right margin will be 2% of the total width of the document.
</p>

<p style="margin: 10px 2% -10px; border:1px solid black;"> top margin will be 10px, left and right margin will be 2% of the total width of the document, bottom margin will be -10px </p>

<p style="margin: 10px 2% -10px auto; border:1px solid black;"> top margin will be 10px, right margin will be 2% of the total width of the document, bottom margin will be -10px, left margin will be set by the browser
</p>

This will produce following result:

all four margins will be 10px

top and bottom margin will be 10px, left and right margin will be 2% of the total width of the document.

top margin will be 10px, left and right margin will be 2% of the total width of the document, bottom margin will be -10px

top margin will be 10px, right margin will be 2% of the total width of the document, bottom margin will be -10px, left margin will be set by the browser

To Become more comfortable - Do Online Practice



previous next Printer Friendly

Advertisements


  

Advertisements