Scribd
Upload
51 views

CSS Margine

The document discusses the CSS margin and padding properties. Margin creates space around an element, while padding creates space between an element's content and border. Margin and padding can be set with one, two, three, or four values to control spacing on individual sides of an element. Examples are provided to demonstrate how to uniformly or individually set margin and padding values.

Uploaded by

Subhadeep Panda
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
51 views

CSS Margine

The document discusses the CSS margin and padding properties. Margin creates space around an element, while padding creates space between an element's content and border. Margin and padding can be set with one, two, three, or four values to control spacing on individual sides of an element. Examples are provided to demonstrate how to uniformly or individually set margin and padding values.

Uploaded by

Subhadeep Panda
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 8

CSS – Margin & Padding Property

abckkjkjkjkjjjkkkkkkkkkkkkkkkkkkkk
kkkkkkkkkkkkkkkkkkkkkkkkkkkkkkk
kkkkkkkkkkkkkkkkkkkkkkkkkkkkkkk
kkkkkkkkkkkkkkkkkkkkkkkkkkkkkkk
kkkkkkkkkkkkkkkkkkkkkkkkkkkkkkk
kkkkkkkkkkkkkkkkkkkkkkkkkkkkkkk
kkkkkkkkkkkkkkkkkkkkkkkkkkkk

Margin of Element

Border of Element

Padding of Element

Content of Element

CSS- Margin

The CSS margin properties are used to create margin around four sides of the
specified element.

Selector {margin : value;}


Unit of value may be pixel, %.
• When we specify margin property with single value in the style rule then it
makes uniform space around the four sides.
Source Code
<!DOCTYPE html>
<html>
<head>
<style>
h1
{ border : 10px solid red;
margin : 10px; }
h2
{ border : 10px solid red;
margin : 30px; }
p
1
{ border : 10px solid red;
margin : 60px; }
</style>
</head>
<body>
<h1>Margin Style 10px</h1>
<p>Margin Style 20px</p>
<h2>Margin Style 40px</h1>
</body>
</html>
Output :

Note :
In above example there is three style rules defined in three selectors, respectively
h1, h2 and p. Style rule of h1 defined margin width 10px , h2 defined 30px and p
selector 60px for four sides.

• When we specify margin property with four values in the style rule then it
makes four different margin space around the four sides.

Selector {margin : top right bottom left;}


Source Code
<!DOCTYPE html>
<html>
<head>
<style>
h1
{ border : 10px solid red;
2
margin : 10px 20px 30px 40px; }
</style>
</head>
<body>
<h1>Margin Style Top Margin = 10px Right Margin = 20px Bottom Margin =
30px left margin 40px
</h1>
<hr>
<h1>Margin Style Top Margin = 10px Right Margin = 20px Bottom Margin =
30px left margin 40px
</h1></body></html>

Output :

Note :
In above example the style rule defined four different margin width for four sides.

• We can specifies any one side of margin using margin-left / margin-right /


margin-top / margin-bottom.

Selector { Margin-left : pixel / %;}


Selector { Margin-right : pixel / %;}
Selector { Margin-top : pixel / %;}
Selector { Margin-bottom : pixel / %;}

<!DOCTYPE html>
<html>
<head>
<style>
h1
{ border : 10px solid red;
3
margin-left : 30px;
margin-top :20px; }
h2
{ border : 10px solid red;
margin-right : 40px;
margin-bottom :20px; }
</style>
</head>
<body>
<h1>Margin Style Margin-left = 10px Margin-top = 20px </h1>
<hr>
<h2>Margin Style Margin-right = 10px Margin-bottom = 20px </h2>
</body></html>
Output :

CSS – Padding Property


The CSS padding properties are used to generate space between an element's
content and defined borders.

Syntax :
Selector {padding : value;}
Unit of value may be pixel, %.

• When we specify padding property with single value in the style rule then it
makes uniform space around the four sides of contents.

4
Source Code
<!DOCTYPE html>
<html>
<head>
<style>
h1
{ border : 5px solid red;
margin : 10px;
padding : 40px; }
</style>
</head>
<body>
<h1> COVID-19
In 2019, the Centres for Disease Control and Prevention (CDC) started
monitoring the outbreak of a new corona virus, SARS-CoV-2, which causes the
respiratory illness now known as COVID-19. Authorities first identified the virus
in Wuhan, China.
Since then, the virus has spread to other countries, both in and outside Asia,
leading the World Health Organization (WHO) to declare this as a pandemic.
</h1>
</html>

Output :

5
• We can specifies any one side of padding using padding-left / padding-right /
padding-top / padding-bottom.

Syntax :
Selector { padding-left : pixel / %;}
Selector { padding-right : pixel / %;}
Selector { padding-top : pixel / %;}
Selector { padding-bottom : pixel / %;}

Source Code
<!DOCTYPE html>
<html>
<head>
<style>
#pd1
{ border : 5px solid red;
margin : 10px;
padding : 40px; }
#pd2
{ border : 5px solid red;
margin : 10px;
padding-left : 40px;
padding-right : 40px;
padding-top : 30px;
padding-bottom : 30px; }
#pd2
{ border : 5px solid red;
margin : 10px;
padding-left : 40px;
padding-right : 40px;
padding-top : 30px;
padding-bottom : 30px; }
#pd3
{ border : 5px solid red;
margin : 10px;
padding : 20px 40px;
padding-right : 40px;
padding-top : 30px;
6
padding-bottom : 30px; }
#pd2
{ border : 5px solid red;
margin : 10px;
padding-left : 40px;
padding-right : 40px;
padding-top : 30px;
padding-bottom : 30px; }
#pd2
{
border : 5px solid red;
margin : 10px;
padding-left : 40px;
padding-right : 40px;
padding-top : 30px;
padding-bottom : 30px;
}
</style>
</head>
<body>
<h1 id=pd1>
Definition
Corona viruses are types of viruses that typically affect the respiratory tracts of
birds and mammals, including humans. Doctors associate them with the
common cold, bronchitis, pneumonia, severe acute respiratory syndrome
(SARS), and COVID-19. They can also affect the gut.
</h1>
<h1 id=pd2> COVID-19
In 2019, the Centres for Disease Control and Prevention (CDC) started
monitoring the outbreak of a new corona virus, SARS-CoV-2, which causes the
respiratory illness now known as COVID-19. Authorities first identified the virus
in Wuhan, China.
Since then, the virus has spread to other countries, both in and outside Asia,
leading the World Health Organization (WHO) to declare this as a pandemic.
</h1>
<h1 id=pd3> COVID-19

7
In 2019, the Centres for Disease Control and Prevention (CDC) started
monitoring the outbreak of a new corona virus, SARS-CoV-2, which causes the
respiratory illness now known as COVID-19. Authorities first identified the virus
in Wuhan, China.
Since then, the virus has spread to other countries, both in and outside Asia,
leading the World Health Organization (WHO) to declare this as a pandemic.
</h1></body></html>

Output :

Note :
In above example the four style rules are defined which are specify four different
padding area for four sides.

You might also like