CSS allows us to control the space around individual sides of an element. The CSS margin property is a shorthand for the following properties: margin-top, margin-right, margin-bottom and margin-left.
Syntax
The syntax of CSS margin property is as follows −
Selector { margin-top: /*value*/ margin-right: /*value*/ margin-bottom: /*value*/ margin-left: /*value*/ }
The following examples illustrate CSS margin property −
Example
<!DOCTYPE html> <html> <head> <style> div { margin-left: auto; margin-bottom: 4em; width: 30%; padding: 0.6rem; box-shadow: inset 0 0 3px turquoise; outline: thin dotted; text-align: center; } div + div { margin-right: 30%; box-shadow: inset 0 0 6px teal; } div + div + div { margin-left: 45%; margin-top: -190px; box-shadow: inset 0 0 6px orange; } </style> </head> <body> <div> This is demo text </div> <div>One (different margins)</div> <div>Two (different margins)</div> </body> </html>
Output
Example
<!DOCTYPE html> <html> <head> <style> div { margin-top: 7%; margin-left: 25%; margin-bottom: -3em; width: 40px; height: 40px; padding: 0.6rem; box-shadow: inset 0 0 3px turquoise; border-top-right-radius: 100px; } div + div { margin-right: 30%; border-top-right-radius: unset; border-top-left-radius: 100px; box-shadow: inset 0 0 6px teal; } div + div + div { margin-left: 25%; margin-top: -140px; box-shadow: inset 0 0 6px orange; border-bottom-right-radius: 100px; } </style> </head> <body> <div></div> <div></div> <div></div> </body> </html>