CSS - margin


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 −

<html>
   <head>
   </head>
   
   <body>
      <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>
   </body>
   
</html> 

This will produce following result −