CodesJava

Easy learning with example program codes

CSS Margin

To specify the space around an HTML element, the CSS Margin property is used. It adds a transparent space without any background color and thus clears an area around an element. Separate properties can be used to modify the top, bottom, left and right margin. The shorthand margin property can be used to modify all the properties at once.

CSS Margin Properties:

PropertyUses
marginUsed to define all the properties in one declaration.
margin-leftUsed to define the left margin of an element.
margin-rightUsed to define the right margin of an element.
margin-topUsed to define the top margin of an element.
margin-bottomUsed to define the bottom margin of an element.

CSS Margin Values:

The possible values for margin property are listed below. The negative values can be used to overlap content.

ValueUses
autoUsed to allow a browser calculate a margin.
lengthUsed to define a margin in pt, px, cm, etc.
%Used to specify a margin in percent of the width of the element.
inheritUsed to inherit the margin from the parent element.

Example:

<!DOCTYPE html>
<html>
<head>
<style>
div {
  border: 5px solid red;
  margin-top: 40px;
  margin-bottom: 30px;
  margin-right: 20px;
  margin-left: 10px;
  background-color: yellow;
}
</style>
</head>
<body>
<h2>Example:</h2>
<div>Hello World!!</div>
</body>
</html>

Output:

Explanation:

In the above example, we are defining the margin individual sides.

Margin: Shorthand Property:

To shorten the code, we can define all the margin properties in one property, the CSS shorthand property is used. We can specify the margin property in either of the four ways.

  • margin: 100px 200px 300px 400px;
  • margin: 100px 200px 300px;
  • margin: 100px 200px;
  • margin 100px;

margin: 100px 90px 80px 70px;

It specifies that:

top margin value is 100px

right margin value is 90px

bottom margin value is 80px

left margin value is 70px

Example:

<!DOCTYPE html>
<html>
<head>
<style>
div {
  border: 5px solid brown;
  margin: 100px 90px 80px 70px;
  background-color: pink;
}
</style>
</head>
<body>
<h2>Example:</h2>
<div>Hello World!!</div>
</body>
</html>

Output:

Explanation:

In the above example, we are using the first way of the margin shorthand property for defining all the margin properties in one property,

margin: 100px 90px 80px;

It specifies that:

top margin value is 100px

left and right margin value is 90px

bottom margin value is 80px

Example:

<!DOCTYPE html>
<html>
<head>
<style>
div {
  border: 5px solid brown;
  margin: 100px 90px 80px;
  background-color: pink;
}
</style>
</head>
<body>
<h2>Example:</h2>
<div>Hello World!!</div>
</body>
</html>

Output:

Explanation:

In the above example, we are using the second way of the margin shorthand property for defining all the margin properties in one property,

margin: 100px 90px;

It specifies that:

top and bottom margin value is 100px

left and right margin value is 90px

Example:

<!DOCTYPE html>
<html>
<head>
<style>
div {
  border: 5px solid brown;
  margin: 100px 90px;
  background-color: pink;
}
</style>
</head>
<body>
<h2>Example:</h2>
<div>Hello World!!</div>
</body>
</html>

Output:

Explanation:

In the above example, we are using the third way of the margin shorthand property for defining all the margin properties in one property,

margin: 100px;

It specifies that:

top, bottom, left and right margin value is 100px.

Example:

<!DOCTYPE html>
<html>
<head>
<style>
div {
  border: 5px solid brown;
  margin: 100px;
  background-color: pink;
}
</style>
</head>
<body>
<h2>Example:</h2>
<div>Hello World!!</div>
</body>
</html>

Output:

Explanation:

In the above example, we are using the fourth way of the margin shorthand property for defining all the margin properties in one property,

Please follow and like us:
error
Posted in CSS   









Copyright © 2019 CodesJava DMCA.com Protection Status