CSS and Margins

css CSS and Margins Margin Properties

CSS Margins

Margin define the space in outside the container like this:

This div has a margin of 50px.

CSS Margin Properties

You can can apply margin properties to each side of element individually.

- margin-top - margin-right - margin-bottom - margin-left Example

You can sets the margins on all four sides differently

Example

<html>
<head>
<style>
 .paragraph {
    margin-top: 50px;
    margin-bottom: 80px;
    margin-right: 100px;
    margin-left: 100px;
}

</style>
</head>
<body>

<p class="paragraph">margins set differently on all four sides<br>
margins set differently on all four sides<br>
margins set differently on all four sides<br>
margins set differently on all four sides<br>
margins set differently on all four sides<br>
margins set differently on all four sides</p>

</body>
</html>

Shorthand Property

Above four properties can use in single statement like this:

Syntax div{margin:top right bottom left; } Example


<style>
.short {
    margin:20px 30px 40px 50px;
    border: 2px dashed #a2a2a2;
}
</style>

<div class="short">This element has a shorthand margin property applied .</div>

margin:15px 10px; •Top and bottom have a margin of 15 pixels. •Right and left have a margin of 10 pixels.

margin:15px 10px 40px; •Top is 10px •Left and right are 10px •Bottom is 30px

Margins on all Sides

This example set the margin on all four sides


<style>
.allside{
    margin:30px ;
    border: 2px dashed grey;
}
</style>

<div class="allside">
This margin property set 30px on all four sides top,right,bottom and left.
</div>

Margin auto

You can set the left and right margins to auto to horizontally center that element within its container. The element will take up the width you specify, then the remaining space will be split evenly between the two margins.. For example,

<html>
<head>
<style>
 .main {
  width: 600px;
  margin: auto; 
}
</style>
</head>
<body>
<div class="main">
This paragraph horizontally center due to margin auto<br>
This paragraph horizontally center due to margin auto<br>
This paragraph horizontally center due to margin auto<br>
This paragraph horizontally center due to margin auto
<div>
</body>
</html>

Margin Inherit

It will use the same value as the same property his parent has use.

Example

<html>
<head>
	<style type="text/css">
		.parent{
 margin:100px;
}
.inherit{
 margin: inherit;
}
	</style>
</head>
<body class="parent">
<h1 class="inherit"> It will use the same value as the same property his parent has use</h1>
</body>
</html>

css Margin Properties Chapter Next »