The margin property defines the space around an HTML element. It is possible to use negative values to overlap content.
The margin specifies a shorthand property for setting the margin properties in one declaration.
The margin-bottom specifies the bottom margin of an element.
The margin-top specifies the top margin of an element.
The margin-left specifies the left margin of an element.
The margin-right specifies the right margin of an element.
Now, we will see how to use these properties
The margin property allows you set all of the properties for the four margins in one declaration. Here is the syntax to set margin around a paragraph −
Here is an example −
See this example:
Output:
all four margins will be 15px
top and bottom margin will be 10px, left and right margin will be 2% of the total width of the document.
top margin will be 10px, left and right margin will be 2% of the total width of the document, bottom margin will be -10px
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
The margin-bottom property allows you set bottom margin of an element. It can have a value in length, % or auto.
Here is an example −
See this example:
Output:
This is a paragraph with a specified bottom margin
This is another paragraph with a specified bottom margin in percent
The margin-top property allows you set top margin of an element. It can have a value in length, % or auto.
Here is an example −
Output:
This is a paragraph with a specified bottom margin
This is another paragraph with a specified bottom margin in percent
The margin-left property allows you set left margin of an element. It can have a value in length, % or auto.
See this example:
Output:
This is a paragraph with a specified left margin
This is another paragraph with a specified top margin in percent
The margin-right property allows you set right margin of an element. It can have a value in length, % or auto.
See this example:
Output:
This is a paragraph with a specified right margin
This is another paragraph with a specified right margin in percent
