×
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
1520    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.
Swami Vivekananda
Education is the manifestation of the perfection already in man.
Swami Vivekananda
2507
34.21
Today So Far
Total View (Lakh)
softetechnologies
01/01/2018     33611
28/06/2017     29530
02/08/2017     27024
26/05/2018     26987
15/05/2017     23239
06/07/2017     21773
01/08/2017     21320
25/06/2018     20124
21/04/2018     18620
14/07/2017     16470
softetechnologies