❐CSS❐

❐wD Learn

CSS

CSS Introduction

CSS Selectors

CSS Color

CSS Background

CSS Border

CSS Margin

CSS Padding

CSS Box Model

CSS Text

CSS Font

CSS Link

CSS List

CSS Overflow

CSS Display

CSS Combinators

CSS Pseudo-classes

CSS Navigation Bar

CSS Hover

CSS Z-index

CSS Media Queries

CSS Shadow

CSS 2D Transform

CSS Animations

CSS Button

CSS FlexBox

CSS Grid

CSS Pagination

CSS Margin The margin is the space outside the HTML element. It gives external spacing and differentiates two or more elements.




Method 1

Syntax


selector {

margin: value;

}

Example


<html lang="en">
<head>
<style>
#p1 {
border: 2px solid purple;
}
#p2 {
margin: 12px;
border: 2px solid red;
}
</style>
</head>
<body>
<p id="p1">CodeWithme(without margin)</p>
<p id="p2">CodeWithme (with margin)</p>
</body>
</html>
Method 2

Syntax


selector {

margin: value1 value2;

}

Example


<html lang="en">
<head>
<style>
#p1 {
border: 2px solid purple;
}
#p2 {
margin: 20px 50px;
border: 2px solid red;
}
</style>
</head>
<body>
<p id="p1">CodeWithMe (without margin)</p>
<p id="p2">CodeWithMe (with margin)</p>
</body>
</html>
Method 3

Syntax


selector {

margin: top_value1 right_value2 bottom_value3 left_value4;

}

Example

<html lang="en">
<head>
<style>
#p1 {
border: 2px solid purple;
}
#p2 {
margin: 15px 30px 25px 50px;
border: 2px solid red;
}
</style>
</head>
<body>
<p id="p1">CodeWithMe (without margin)</p>
<p id="p2">CodeWithMe (with margin)</p>
</body>
</html>