Loading

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

 

FEATURESMARGINPADDING
DefinitionSpace outside the element's border.Space inside the element's border, between the border and the content.
Affects LayoutYes, adds space outside the element, affecting the layout around it.Yes, adds space inside the element, affecting the internal layout.
PositionPositioned outside the element's border.Positioned inside the element's border.
Negative ValuesAllowed, can create overlapping elements.Not allowed, values must be non-negative.
Impact on Box ModelAffects 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 BehaviorAdjacent vertical margins may collapse.Padding does not collapse.
Impact on Background ColorDoes not affect the background color of the element.Affects the background color of the element (background color extends to the padding area).
UsageUsed to create space between elements.Used to create space within an element, providing spacing around the content.
Propertiesmargin-top, margin-right, margin-bottom, margin-leftpadding-top, padding-right, padding-bottom, padding-left