CSS Basic Tutorial
CSS Introduction
CSS Tutorials
CSS Syntax
CSS How To Use
CSS Selector
CSS Background
CSS Display
CSS Float
CSS Font
CSS Icon
CSS Link
CSS Table
CSS Line Hight
CSS Opacity
CSS Height & Width
CSS Overflow
CSS Position
CSS White Space
CSS Word Wrap
CSS Box Model
CSS Box Model
CSS Padding
CSS Margin
CSS Border
CSS Advance
CSS Forms
CSS Navigation Bar
CSS Tooltip
CSS Buttons
CSS Pagination
CSS Attribute Selectors
CSS3 Features
CSS3 Drop Shadows
CSS3 2D Transforms
CSS3 3D Transforms
CSS3 Transition
CSS3 Animation
CSS3 Layout
CSS3 Filter
CSS3 Media Queries
Reading
CSS3 Interview Questions
Advertisement
Advertisement
CSS Margin
The margin property defines the space around elements i.e, how much space should be left to the sides.
It is transparent and doesn't have any background color.
You can change the margins of an element one by one for each side or can give all at once using shorthand property.
CSS Margin Properties
| CSS Margin Properties | Description |
|---|---|
| margin | It sets a same margin for every side of the element. |
| margin-left | It only sets the left margin of an element. |
| margin-right | It only sets the right margin of an element. |
| margin-top | It only sets the top margin of an element. |
| margin-bottom | It only sets the bottom margin of an element. |
Example
Try this code »
<!DOCTYPE html>
<html lang="en">
<head>
<title> CSS margin </title>
<meta charset="UTF-8">
<style>
p{
margin-top: 50px;
margin-bottom: 50px;
margin-right: 100px;
margin-left: 100px;
border: 1px solid black;
background-color: skyblue;
}
</style>
</head>
<body>
<h2>This paragraph is not displayed with specified margin. </h2>
<p>This paragraph is displayed with specified margin.</p>
</body>
</html>
<html lang="en">
<head>
<title> CSS margin </title>
<meta charset="UTF-8">
<style>
p{
margin-top: 50px;
margin-bottom: 50px;
margin-right: 100px;
margin-left: 100px;
border: 1px solid black;
background-color: skyblue;
}
</style>
</head>
<body>
<h2>This paragraph is not displayed with specified margin. </h2>
<p>This paragraph is displayed with specified margin.</p>
</body>
</html>
Output
This paragraph is not displayed with specified margin.
This paragraph is displayed with specified margin.
Margin - Shorthand Property
CSS shorthand property shortens the code to give margins. It specifies all the margin properties for all sides at once and there would be no need to give each side's margin separately.| If four values are given: | If three values are given: |
|---|---|
| margin: 25px 50px 75px 100px; | margin: 25px 50px 75px; |
| top margin is 25px | top margin is 25px |
| right margin is 50px | left and right margins are 50px |
| bottom margin is 75px | bottom margin is 75px |
| left margin is 100px |
| If two values are given: | If only one value is given: |
|---|---|
| margin: 25px 50px; | margin: 25px; |
| top and bottom margins are 25px | all four margins are 25px |
| left and right margins are 50px |
Example
Try this code »
<!DOCTYPE html>
<html lang="en">
<head>
<title> CSS Margin Property </title>
<meta charset="UTF-8">
<style>
.example {
background-color: seagreen;
margin: 50px 100px 150px 200px;
padding:10px;
}
</style>
</head>
<body>
<h3>This paragraph is not displayed with specified margin. </h3>
<p class="example">This paragraph is displayed with specified margin.</p>
</body>
</html>
<html lang="en">
<head>
<title> CSS Margin Property </title>
<meta charset="UTF-8">
<style>
.example {
background-color: seagreen;
margin: 50px 100px 150px 200px;
padding:10px;
}
</style>
</head>
<body>
<h3>This paragraph is not displayed with specified margin. </h3>
<p class="example">This paragraph is displayed with specified margin.</p>
</body>
</html>
Output
This paragraph is displayed with specified margin.
CSS Margin Values
| Value | Description |
|---|---|
| auto | It lets the browser calculate the horizontal margins. It equally divides the margins from the space available. |
| length | It specify a margin in pt, px, cm, etc. |
| % | It defines margin in percent values of the width of containing element. |
| inherit | It inherits margin from parent element. |
The inherit Value
This example lets the left margin be inherited from the parent element:
Example
Try this code »
<!DOCTYPE html>
<html lang="en">
<head>
<title> CSS Margin Inherit </title>
<meta charset="UTF-8">
<style>
#example {
border: 1px solid blue;
margin-left: 50px;
}
#inherit {
margin-left: inherit;
}
</style>
</head>
<body>
<h2>Use of the inherit value</h2>
<p>Let the left margin be inherited from the parent element:</p>
<div class="container" id="example">
<p id="inherit">This is a paragraph with an inherited left margin (from the div element).</p>
</div>
</body>
</html>
<html lang="en">
<head>
<title> CSS Margin Inherit </title>
<meta charset="UTF-8">
<style>
#example {
border: 1px solid blue;
margin-left: 50px;
}
#inherit {
margin-left: inherit;
}
</style>
</head>
<body>
<h2>Use of the inherit value</h2>
<p>Let the left margin be inherited from the parent element:</p>
<div class="container" id="example">
<p id="inherit">This is a paragraph with an inherited left margin (from the div element).</p>
</div>
</body>
</html>
Output
This is a paragraph with an inherited left margin (from the div element).
Recommended :
Color Picker
List of color names supported by all browser »
Character Code
List of character codes to display special character »
Language Code
List of all language supported by all browser »
Country Code
List of Country code supported by all browser »