HtmlCssMonk

Margin in CSS | Learn Basic CSS

code, coding, computer

DESCRIPTION

Margins are used to create space around elements, outside of any defined borders. Unlike Padding , In Margins it is possible to set negative values to overlap the content. Values of margins aren’t inherited by child element.

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

Simple Example of margins –

<html>

<head>
</head>

<body>
  <p style="margin: 15px; border:1px solid black;">
    All sides have 15px margin.
  </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>
</body>

</html>

This Code will produce the following result on your webpage –

NOTE – Margins create extra space around an element. In contrast, padding creates extra space within an element.


Syntax

To Apply margin to all four sides

margin: 1em;

For vertical | horizontal

margin: 5% 10%;

For top | horizontal | bottom

margin: 1em 2em 2em;

For top | right | bottom | left

margin: 5px 1em 0 2em;


Margins Shorthand Properties

CSS allows you to set margin for each side individually .

  • margin-bottom specifies the bottom margin of an element.
  • margin-top specifies the top margin of an element.
  • margin-left specifies the left margin of an element.
  • margin-right specifies the right margin of an element.

EXAMPLES –

1. Margin-bottom

<html>

<head>
</head>

<body>
  <p style="margin-bottom: 15px; border:1px solid black;">
    This is a paragraph with a specified bottom margin
  </p>

  <p style="margin-bottom: 5%; border:1px solid black;">
    This is another paragraph with a specified bottom margin in percent
  </p>
</body>

</html>

This Code will produce the following result on your webpage –


2. Margin-top

<html>

<head>
</head>

<body>
          <p style = "margin-top: 15px; border:1px solid black;"> 
               This paragraph has 15px top margin.
          </p>
          <p style = "margin-top: 5%; border:1px solid black;"> 
               This paragraph has top margin equal to 5% of the containing element.
           </p>
</body>

</html>

This Code will produce the following result on your webpage –


3. Margin-left

<html>
   <head>
   </head>

   <body>
      <p style = "margin-left: 15px; border:1px solid black;">
         This paragraph has 15px left margin.
      </p>
      
      <p style = "margin-left: 5%; border:1px solid black;">
         This paragraph has left margin equal to 5% of the containing element.
      </p>
   </body>
</html> 

This Code will produce the following result on your webpage –


4. Margin-right

<html>
   <head>
   </head>
   
   <body>
      <p style = "margin-right: 15px; border:1px solid black;">
         This paragraph has 15px right margin.
      </p>
      <p style = "margin-right: 5%; border:1px solid black;">
         This paragraph has right margin equal to 5% of the containing element.
      </p>
   </body>
</html> 

This Code will produce the following result on your webpage –


Next topic – Borders in CSS

Previous topic – Paddings in CSS


Leave a Comment

Your email address will not be published. Required fields are marked *