Margins
Margins
- In CSS margins are used to control space around an HTML element.
- Margins create space between other elements and the browser window
- For individual sides(top, bottom, right, left) we can set different sizes of margins
- Margins are completely transparent and don't have any background color
Margin properties can have the following values:
- Length in cm, px, pt, etc.
- Width % of the element.
- Margin calculated by the browser: auto.
Syntax:
body {
margin: value;
}
margin properties:
- margin-top: Indicates the margin on the top of an element.
- margin-right: Indicates the margin on the right side of an element.
- margin-bottom: Indicates the margin on the bottom of an element.
- margin-left: Indicates the margin on the left side of an element.
Note: The margin property allows negative values.
If the margin property has 4 values:
margin: 40px 100px 120px 80px;
- top = 40px
- right = 100px
- bottom = 120px
- left = 80px
Example:
margin: 50px 100px 150px 200px;
It identifies that:
top margin value is 50px
right margin value is 100px
bottom margin value is 150px
left margin value is 200px
<!DOCTYPE html>
<html>
<head>
<style>
p {
background-color: pink;
}
p.ex {
margin: 50px 100px 150px 200px;
}
</style>
</head>
<body>
<p>This paragraph is not displayed with specified margin. </p>
<p class="ex">This paragraph is displayed with specified margin.</p>
</body>
</html>
Output:
Margins - Percentages:
We can set percentage values for the margins of an element.
Example:
<html>
<head>
<style>
h1 {
margin: 5%;
background-color: #eee;
}
</style>
</head>
<body>
<div style="width: 600px; border: 1px dotted;">
<h1>An h1 element with grey background!</h1>
</div>
<div style="width: 400px; border: 1px dotted;">
<h1>An h1 element with grey background!</h1>
</div>;
</body>
</html>
Output:
Margins - Inline Elements:
- Margin values can also be applied to inline elements but top and bottom margins do not have any effect
Example:
<html>
<head>
<style>
div {
border: 1px dotted
}
strong {
margin-top: 25px;
margin-bottom: 50px;
margin-left: 25px;
background-color: #eee;
}
</style>
</head>
<body>
<div>
<p>This text has some strong text <strong>Qupoin</strong> with grey background</p>
</div>
</body>
</html>
Output:
Difference Between Margin and Padding
FEATURES | MARGIN | PADDING |
---|---|---|
Definition | Space outside the element's border. | Space inside the element's border, between the border and the content. |
Affects Layout | Yes, adds space outside the element, affecting the layout around it. | Yes, adds space inside the element, affecting the internal layout. |
Position | Positioned outside the element's border. | Positioned inside the element's border. |
Negative Values | Allowed, can create overlapping elements. | Not allowed, values must be non-negative. |
Impact on Box Model | Affects the outer space of the element, impacting its position relative to other elements. | Increases the size of the element's box, affecting its content area. |
Collapsing Behavior | Adjacent vertical margins may collapse. | Padding does not collapse. |
Impact on Background Color | Does not affect the background color of the element. | Affects the background color of the element (background color extends to the padding area). |
Usage | Used to create space between elements. | Used to create space within an element, providing spacing around the content. |
Properties | margin-top , margin-right , margin-bottom , margin-left | padding-top , padding-right , padding-bottom , padding-left |