CSS Margin
 |
CSS Margin |
Margin is outside the border.
Margin: Space around each of the paragraph.
Without margin, lets see an example.
Example without Margin
<html><head>
<style type=”text/css”>
p { background-color:blue;
color:white; }
</style>
</head>
<body>
<p>In life I will be the refuge of millions. In death they will say goodbye with tears. As a source of everlasting inspiration, I will live in the joy, sorrow, problems and promises of successive generations.</p>
<p>I am an inseparable part of eternal life. My life is a profound journey for fulfilling a noble mission. I do all my work joyfully and enthusiastically. Every task brings deep satisfaction.</p>
</body>
</html>
Output
In life I will be the refuge of millions. In death they will say goodbye with tears. As a source of everlasting inspiration, I will live in the joy, sorrow, problems and promises of successive generations.
I am an inseparable part of eternal life. My life is a profound journey for fulfilling a noble mission. I do all my work joyfully and enthusiastically. Every task brings deep satisfaction.
Example with margin = 0 pixel
<html><head>
<style type="text/css">
p { background-color:blue;
color:white;
margin: 0px;}
</style>
</head>
<body>
<p>In life I will be the refuge of millions. In death they will say goodbye with tears. As a source of everlasting inspiration, I will live in the joy, sorrow, problems and promises of successive generations.</p>
<p>I am an inseparable part of eternal life. My life is a profound journey for fulfilling a noble mission. I do all my work joyfully and enthusiastically. Every task brings deep satisfaction.</p>
</body>
</html>
Output
In life I will be the refuge of millions. In death they will say goodbye with tears. As a source of everlasting inspiration,
I will live in the joy, sorrow, problems and promises of successive generations.
I am an inseparable part of eternal life. My life is a profound
journey for fulfilling a noble mission. I do all my work joyfully and enthusiastically. Every task brings deep satisfaction.
Setting margin = 30 pixels, allows space from all sides from content box.
Example with margin = 30 pixels
<html><head>
<style type="text/css">
p { background-color:blue;
color:white;
margin: 30px ;}
</style>
</head>
<body>
<p>In life I will be the refuge of millions. In death they will say goodbye with tears. As a source of everlasting inspiration, I will live in the joy, sorrow, problems and promises of successive generations.</p>
<p>I am an inseparable part of eternal life. My life is a profound journey for fulfilling a noble mission. I do all my work joyfully and enthusiastically. Every task brings deep satisfaction.</p>
</body>
</html>
Output
In life I will be the refuge of millions. In death they will say goodbye with tears. As a source of everlasting inspiration,
I will live in the joy, sorrow, problems and promises of successive generations.
I am an inseparable part of eternal life. My life is a profound
journey for fulfilling a noble mission. I do all my work joyfully and enthusiastically. Every task brings deep satisfaction.
Now each of our paragraphs is 30 pixels surrounding in.
The padding does not change. The padding in the border remains same.
Now we will see what happen exactly with margin attribute.
Example with all margin properties
<html><head>
<style type="text/css">
p { background-color:blue;
color:white;
margin-left: 10px ;
margin-bottom: 70px ;
margin-right: 40px ;
margin-top: 30px ;}
</style>
</head>
<body>
<p>In life I will be the refuge of millions. In death they will say goodbye with tears. As a source of everlasting inspiration, I will live in the joy, sorrow, problems and promises of successive generations.</p>
<p>I am an inseparable part of eternal life. My life is a profound journey for fulfilling a noble mission. I do all my work joyfully and enthusiastically. Every task brings deep satisfaction.</p>
</body>
</html>
Output
In life I will be the refuge of millions. In death they will say goodbye with tears. As a source of everlasting inspiration,
I will live in the joy, sorrow, problems and promises of successive generations.
I am an inseparable part of eternal life. My life is a profound
journey for fulfilling a noble mission. I do all my work joyfully and enthusiastically. Every task brings deep satisfaction.
Example with border
<html><head>
<style type="text/css">
div { border: 2px solid black;}
.side { background-color:blue;
color:white;
margin-left: 20px ;
margin-bottom: 70px ;
margin-right: 40px ;
margin-top: 30px ;}
</style>
</head>
<body>
<div style="width: 200px; height:300px;"}
<div class="side">
<p>In life I will be the refuge of millions. In death they will say goodbye with tears. As a source of everlasting inspiration,
I will live in the joy, sorrow, problems and promises of successive generations.</p>
<p>I am an inseparable part of eternal life. My life is a profound
journey for fulfilling a noble mission. I do all my work joyfully and enthusiastically. Every task brings deep satisfaction.</p>
</div>
</div>
</body>
</html>
Output
In life I will be the refuge of millions. In death they will say goodbye with tears. As a source of everlasting inspiration,
I will live in the joy, sorrow, problems and promises of successive generations.
I am an inseparable part of eternal life. My life is a profound journey for fulfilling a noble mission. I do all my work joyfully and enthusiastically. Every task brings deep satisfaction.
I am an inseparable part of eternal life. My life is a profound journey for fulfilling a noble mission. I do all my work joyfully and enthusiastically. Every task brings deep satisfaction.
 |
| CSS Margin |
No comments:
Post a Comment