CSS Margin

The margin properties specify the space outside the border of an element.

The top, right, bottom and left margin can be changed independently using seperate properties. A shorthand margin property is also created to control multiple sides at once.

Margin Properties

The possible properties can be used for margin are as follows:

Value Description
margin-top It specifies the top margin of an element.
margin-bottom It specifies the bottom margin of an element.
margin-right It specifies the right margin of an element.
margin-left It specifies the left margin of an element.
margin It acts as a shorthand for the preceding properties.

Margin Example

Below examples will demonstrate the basic architecture of margin

Basic Syntax:
p{ margin-top: 5%; }


Example:
<!doctype html>  
<html>

    <head>
        <title>...</title>
    </head>
  
    <body>
       <p style="background-color: yellow; margin: 5%;">Learn CSS with PHPDocs community</p>
    </body>

</html>