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 −

Live Demo
<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 −



Advertisements