CSS Margins

The margin property is used to define the space around HTML elements. The Margin property support pixel, percentage or auto measurement value and the negative values are also allowed. In margin there are following properties to set an element margin :

1. margin-top :

The margin-top property is used to set top margin of an element. Example :
<!DOCTYPE>
<html>
<head>
  <title>margin-Top</title>
</head>
<body>
  <p style="margin-top: 40px;">Hello world This is The first Paragraph</p>
</body>
</html>
Output :

Hello world This is The first Paragraph

2. margin-right :

The margin-right property is used to set right margin of an element. Example :
<!DOCTYPE>
<html>
<head>
  <title>Margin-Bottom</title>
</head>
<body>
  <p style="margin-right: 40px;">Hello world This is The first Paragraph</p>
</body>
</html>
Output :

Hello world This is The first Paragraph

3. margin-bottom :

The margin-right property is used to set bottom margin of an element. Example :
<!DOCTYPE>
<html>
<head>
  <title>Margin-Bottom</title>
</head>
<body>
  <p style="margin-bottom: 40px;">Hello world This is The first Paragraph</p>
</body>
</html>
Output :

Hello world This is The first Paragraph

4. margin-left :

The margin-right property is used to set left margin of an element. Example :
<!DOCTYPE>
<html>
<head>
  <title>Margin-Left</title>
</head>
<body>
  <p style="margin-left: 40px;">Hello world This is The first Paragraph</p>
</body>
</html>
Output :

Hello world This is The first Paragraph

5. Margin Shorthand Property :

The margin shorthand shorthand property or margin property is used too set all the properties for the four margins in one declaration. Just remember the border properties of each sides are the below sequence :
  • margin-top
  • margin-right
  • margin-bottom
  • margin-left
Example :
 margin: 45px 50px 40px 75px;
Where top margin in 45px, right margin is 50px, bottom margin is 40px and left margin is 75px.
<!DOCTYPE>
<html>
<head>
  <title>Margin-Shorthand</title>
</head>
<body>
  <p style="margin: 45px 50px 40px 75px;">Hello world This is The first Paragraph</p>
</body>
</html>
Output :

Hello world This is The first Paragraph


Next Topic :