Introduction to element margins

In the previous article, I briefly introduced the padding. Today, I want to talk about the outer margin of the element.

Padding can be used if an element wants to have spacing from other elements, but padding will change the size of the element. We can also use margins to increase spacing. We compare the human body to an element, then margin is our aura.

The margin is the same as padding and is divided into 4 directions, namely:

margin-top: top margin

margin-right: right margin

margin-bottom: bottom margin

margin-left: left margin

An example is shown below:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>margin in 4 directions</title>
		<style>
			.box1{
				width: 100px;
				height: 100px;
				background: red;
			}
			.box2{
				width: 100px;
				height: 100px;
				background: blue;
				/* top margin */
				margin-top: 10px;
				margin-left: 20px ;
			}
		</style>
	</head>
	<body>
		<div class="box1"></div>
		<div class="box2"></div>
	</body>
</html>

    The effect is as follows:

   The value of margin can also be negative, as follows:

When the same level element uses a margin in the vertical direction, the situation will change a little, the code is as follows:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>margin in 4 directions</title>
		<style>
			.box1{
				width: 100px;
				height: 100px;
				background: red;
				/*bottom margin*/
				margin-bottom: 20px;
			}
			.box2{
				width: 100px;
				height: 100px;
				background: blue;
				/* top margin */
				margin-top: 10px;
			}
		</style>
	</head>
	<body>
		<div class="box1"></div>
		<div class="box2"></div>
	</body>
</html>

    The effect is as follows:

    It can be seen that when margin-top and margin-bottom are defined at the same time, only large values are used when both are positive numbers.

Continue to look at the case of negative numbers:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>margin in 4 directions</title>
		<style>
			.box1{
				width: 100px;
				height: 100px;
				background: red;
				/*bottom margin*/
				margin-bottom: -80px;
			}
			.box2{
				width: 100px;
				height: 100px;
				background: blue;
				/* top margin */
				margin-top: -10px;
			}
		</style>
	</head>
	<body>
		<div class="box1"></div>
		<div class="box2"></div>
	</body>
</html>

The effect is as follows:

It can be seen from the specific effect that when both are negative numbers, the absolute value of the thing taken is larger for processing.

What if it is one positive and one negative? Please see the code:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>margin in 4 directions</title>
		<style>
			.box1{
				width: 100px;
				height: 100px;
				background: red;
				/*bottom margin*/
				margin-bottom: 11px;
			}
			.box2{
				width: 100px;
				height: 100px;
				background: blue;
				/* top margin */
				margin-top: -10px;
			}
		</style>
	</head>
	<body>
		<div class="box1"></div>
		<div class="box2"></div>
	</body>
</html>

The effect is as follows:

It can be seen that when it is one positive and one negative, it is processed by the result of adding the numbers.

Margin can also be used to handle element centering issues:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>margin in 4 directions</title>
		<style>
			.box1{
				width: 100px;
				height: 100px;
				background: red;
			}
			.box2{
				width: 100px;
				height: 100px;
				background: blue;
                                /* Set the vertical dimension to 20px spacing, and the horizontal dimension to auto (auto-centering)*/
				margin: 20px auto;
			}
		</style>
	</head>
	<body>
		<div class="box1"></div>
		<div class="box2"></div>
	</body>
</html>

Results as shown below:

If the horizontal direction is set to auto, the element will be automatically centered.

When the element is in a parent-child relationship, the child element will automatically pass the margin to the parent when the vertical margin is set, and the parent will display the corresponding effect.

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>margin in 4 directions</title>
		<style>
			.box1{
				width: 100px;
				height: 100px;
				background: red;
			}
			.box2{
				width: 50px;
				height: 50px;
				background: blue;         
                                /*Child elements define margin-top*/
				margin-top: 20px;
			}
		</style>
	</head>
	<body>
		<div class="box1">
			<div class="box2"></div>
		</div>
	</body>
</html>

    The effect is shown in the following figure:

     As can be seen from the above figure, the top margin of the child element box2 is directly passed to the parent box1, which becomes the top margin of box1.

If we really want box2 to be 10px from the top of box1, then we need to use padding for processing.

This concludes the introduction to margins.

As long as you work hard enough, victory is in front of you!

Introduction to element margins

Guess you like