The Developer Brains


MARGIN PROPERTY

Web Designing | Web Development


SEE MORE














</CSS3 MARGIN>





CSS3 margin property used to add some gap between two elements. Margin property gives a proper look to a web page.



SEE MORE




















</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 property use when you want equal margin from top, right, bottom and left direction.

  • margin-top:10px

  • Margin from top direction

  • margin-right:10px

  • Margin from right direction

  • margin-bottom:10px

  • Margin from bottom direction

  • margin-left:10px

  • Margin from left direction




<!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-top:10px;margin-right:10px;margin-bottom:10px;margin-left:10px;}

  • margin:10px 20px 30px 40px

  • {margin-top:10px;margin-right:20px;margin-bottom:30px;margin-left:40px}

  • margin:-10px 20px 20px 20px


  • {margin-top:-10px;margin-right:10px;margin-bottom:10px;margin-left:10px}


	
		<!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


















what is the correct way of writing margin shorthand?
1. margin: top right left bottom
2. margin: top left right bottom
3. margin: right top bottom left
4. margin: top right bottom left



Check Now



CSS3 QUIZ







Next: CSS3 Padding Property


Previous

      

Next Page













  Share TDB SCHOOL  

Share this E-Learning Website on social media platforms with your friends and followers