knowledgediarybd.com

Your Virtual Knowledge Campus

CSS Padding and Margin

css padding & marginCSS Padding and Margin are essential properties for article/content writing. CSS padding & margin provides a lot of features to write an interactive content or article.

Dear,readers here, I will discuss details about  css padding & margin that will be helpful for better performance/experience in css.

CSS Padding:

In css padding defines the certain space outside the content area and also inside the margin or border area.We can defines padding area/space  by the

following four ways:

1.padding-top

2.padding-right

3.padding-bottom

4.padding-left

I hope you will be clear about css padding by the following interface:

padding vs margin

An Example of css padding  in HTML:

<html>
<head>
<title>CSS padding</title>
<style> /* internal css*/
p{
border-style:solid;border-color:#9900CC; border-width:3px;
font-size:20px;
color:green;
padding-top:20px;
padding-right:20px;
padding-bottom:20px;
padding-left:20px;
}
</style>

</head>

<body>
<p>This an example of css padding properties</br>
where padding-top:20px; padding-right:20px; </br>
padding-bottom:20px; padding-left:20 px;</p>

</body>
</html>

output of the above code looks like below:

css padding

Dear reader, we can complete above css padding declaration by a single line command:

For Example:

p{

padding: 20 px;

}

CSS margin:

css margin defines the certain space outside of the border area and also determine the space among various content elements .We can defines margin area/space  by the following four ways:

1. margin-top

2. margin-right

3. margin-bottom

4. margin-left

I hope you will be clear about css margin by the following interface:

padding vs margin

An Example of css margin  in HTML:

<html>
<head>
<title>CSS margin</title>
<style> /* internal css*/
body{ background-color:blue;
}

p{
background-color:#000000;
border-style:solid;border-color:#9900CC; border-width:3px;
font-size:20px;
color:yellow;
margin-top:20px;
margin-right:20%;
margin-bottom:20px;
margin-left:40%;
}
</style>

</head>

<body >
<p>This an example of css margin properties</br>
where margin-top:20px; margin-right:20%; </br>
margin-bottom: 20px; margin-left:50%;</p>

</body>
</html>

output of the above code looks like below:

margin

Dear reader, we can complete above css margin declaration by a single line command:

For Example:

p{

margin: 20 px;

}

Related Post or  you may interest

knowledgediarybd.com © 2017
shares