×
FREE ASSISTANCE FOR THE INQUISITIVE PEOPLE
Tutorial Topics
X
softetechnologies
CSS Padding Property | set the paading of a DIV CSS Border property display the border on HTML page
CSS Margin Property | set the margin - CSS 3.0
1788    Arnab De    11/05/2017

CSS Margin Property

To generate the space around any elements in a HTML page we use the margin properties of CSS Margin Property. This property set the space between outside of the border of any elements to other elements. We can set the margin property for every side of a element through the following property of the CSS.

  • margin-left
  • margin-right
  • margin-top
  • margin-bottom

Note: (-ve) Negetive value of the margin are also allowed.

The value of the margin are specified by following values

auto : set by browser
length : specified a margin in pt,cm, px etc
% : % of the width of a container
inherit : value inherit from its parent element.

softetechnologies

Set The Marrgin : Example

now we set the margin of a DIV container

CSS Code

DIV
{
           margin-top:10px;
           margin-buttom:100px;
           margin-left:200px;
           margin-right:300px;
           background-color:#FFFF00;
}

HTML CODE

<!DOCTYPE html>
<html>
<head>
<title>Margin Demo</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
On the Insert tab,
<div>
On the Insert tab, the galleries include items that are designed to coordinate with the overall look of your document.
</div>
On the Insert tab,
</body>
</html>

margin all
Margin All

Shortcut process of margin

margin:10px 20px 30px 40px [ top right bottom left ]

margin:10px 20px 30px [top (right&left) bottom ]

margin:10px 20px [(top&bottom) (right&left)]

margin:10px[ all margin ]

softetechnologies

Center Alignment margin

Placed a element horizontally center to it container.

CSS Code

DIV
{
           width:150px;
           margin:auto;
           background-color:#FFFF00;
}

HTML CODE


<!DOCTYPE html>
<html>
<head>
<title>Button Group</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div>
On the Insert tab
</div>
</body>
</html>

horizontally center
Horizontally Center
CSS Padding Property | set the paading of a DIV CSS Border property display the border on HTML page
softetechnologies
Author Details
Arnab De
I have over 16 years of experience working as an IT professional, ranging from teaching at my own institute to being a computer faculty at different leading institute across Kolkata. I also work as a web developer and designer, having worked for renowned companies and brand. Through tutorialathome, I wish to share my years of knowledge with the readers.
Enter New Comment
Comment History
No Comment Found Yet.
Rabindranath Tagore
You can't cross the sea merely by standing and staring at the water.
Rabindranath Tagore
202
44.94
Today So Far
Total View (Lakh)
softetechnologies
26/05/2018     36732
01/01/2018     34923
28/06/2017     32404
02/08/2017     30469
25/06/2018     30216
15/05/2017     25401
01/08/2017     24701
06/07/2017     24612
14/07/2017     20225
21/04/2018     19839
softetechnologies