If Margin Property Contains Three Values
If the margin property contains three values, the top margin is 40px, The right and left margins are 100px, and the bottom margin is 120px.
Syntax:
margin: 40px 100px 120px;
Example: In this example, we are using the margin property with three values.
HTML
<!DOCTYPE html> <html> <head> <title>Margin Example</title> <style> div { border: 2px solid black; margin: 40px 100px 120px; background-color: lightgreen; } h2 { color: green; } </style> </head> <body> <h2>w3wiki</h2> <div>margin has 3 values</div> </body> </html> |
Output:
CSS Margin
CSS Margin is the space outside an element, separating it from other elements. It adds space around an element, affecting its positioning and creating gaps between other elements.
CSS provides properties to specify the margin for each side of an element individually.
- margin-top: Sets the margin space above the element.
- margin-right: Sets the margin space to the right of the element.
- margin-bottom: Sets the margin space below the element.
- margin-left: Sets the margin space to the left of the element.
Margin properties can have the following values:
- Length in cm, px, pt, etc.
- Width % of the element.
- Margin calculated by the browser: auto.
Syntax:
.myDiv {
margin-top: 80px;
margin-right: 100px;
margin-bottom: 50px;
margin-left: 80px;
}
Example: In this example, we are using the above-mentioned margin properties.
HTML
<!DOCTYPE html> <html> <head> <title>Margin Example</title> <style> body { margin: 0; padding: 20px; } h2 { color: green; } .parentDiv { background-color: lightblue; border: 1px solid black; padding: 20px; width: 40%; /* Applying margin to the child div */ } .childDiv { background-color: wheat; /* Applying margin to the child div */ margin-top: 20px; margin-right: 20px; margin-bottom: 15px; margin-left: 30px; } </style> </head> <body> <h2>w3wiki</h2> <div class="parentDiv"> <div class="childDiv"> Margin box </div> </div> </body> </html> |
Output: