</CSS3 Margin Property>

Use of margin property in CSS

CSS3 Margin

You can use margin property to separate inline and block elements.

{margin-left  :  20px;}
                
property        value

Example

Here is a simple example of margin property.
We are applying margin property on a <p> tag.

When you run the code you can see that the 2nd paragraph has margin=50px from left.


<body>
<p type="submit" style="color:rgb(255, 255, 255);background-color: red;">
    theDeveloperBrains Tutorial
</p>
<p type="submit" style="color:rgb(255, 255, 255);background-color: red;margin-left:50px">
    theDeveloperBrains Tutorial
</p>
</body>

Try it Yourself

</CSS3 Margin Shorthand>

CSS3 margin property specifies a Shorthand property (all padding properties in one declaration)

CSS3 Margin Property

margin:10px

margin-top:10px

margin-right:10px

margin-bottom:10px

margin-left:10px


<!DOCTYPE html>
<html>
	<head>
		<style>
		.tdb-school{color:black;background-color:white;
			margin:10px 35px 10px 35px;
			padding:10px 20px;
			border:none;
			border-radius:5px}
		.top{margin-top:50px}
		.right{margin-right:50px}
		.bottom{margin-bottom:50px}
		.left{margin-left:50px}
		div{background-color:black;
			margin-bottom:5px}
		</style>
	</head>

	<!--Body-->
	<body>
		<div><button type="submit" class="tdb-school margin">margin</button></div>
		<div><button type="submit" class="tdb-school top">margin</button></div>
		<div><button type="submit" class="tdb-school right">margin</button></div>
		<div><button type="submit" class="tdb-school bottom">margin</button></div>
		<div><button type="submit" class="tdb-school left">margin</button></div>
	</body>
</html>

Try it Yourself

Margin Short-hand

CSS3 margin property specifies a Shorthand property (all margin properties in one declaration)

{margin  :  10px 10px 10px 10px;}
                       
property    top right bottom left

margin:10px 10px 10px 10px

margin:10px 20px 30px 40px

margin:-10px 20px 20px 20px

	
		<!DOCTYPE html>
<html>
	<head>
		<style>
		.tdb-school{
			color:black;
			background-color:white;
			padding:20px 20px 20px 20px;
			margin:20px 20px 20px 20px;
			border:none;
			border-radius:5px;
		}
		div{background-color:black}
		</style>
	</head>

	<;!--Body-->
	<body>
	<div>
		<button type="submit" class="tdb-school padding">
		Padding
		</button>
		<;/div>
		<br><br>
	</body>
</html>

Try it Yourself

MARGIN PROPERTY

</CSS3 MARGIN>