How to set margins in css-Front-end Q&A-php.cn

How to set margins in css

青灯夜游

Release： 2023-01-06 11:13:01

Original

12307 people have browsed it

How to set margins in css: 1. Use the margin attribute to set all the margins of the element in one statement; 2. Use the margin-top, margin-bottom, margin-left and margin-right attributes, Set the top, bottom, left, and right margins of the element respectively.

How to set margins in css

The operating environment of this tutorial: Windows 7 system, CSS3&&HTML5 version, Dell G3 computer.

1. Use the margin attribute

margin shorthand attribute to set all margin attributes in one statement. This attribute can have 1 to 4 values.

Example:

margin:10px 5px 15px 20px;

Copy after login

The top margin is 10px
The right margin is 5px
The bottom margin is 15px
The left margin is 20px

margin:10px 5px 15px;

Copy after login

The top margin is 10px
The right and left margins are 5px
The bottom margin is 15px

margin:10px 5px;

Copy after login

The top and bottom margins are 10px
The right and left margins are 5px

margin:10px;

Copy after login

All four Each margin is 10px

2. Use margin-top, margin-bottom, margin-left and margin-right attributes

margin-top: Set the top margin of the element
margin-bottom: Set the bottom margin of the element
margin-left: Set the left margin of the element
margin-right: Set the right margin of the element

Example:

<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<style>
			div{
				border: 1px solid red;
			}
			.a1{
				margin-top: 10px;
			}
			.a2{
				margin-bottom: 10px;
			}
			.a3{
				margin-left: 10px;
			}
			.a4{
				margin-right: 10px;
			}
		</style>
	</head>

	<body>
		<div>测试文本</div>
		<div class="a1">测试文本</div>
		<div class="a2">测试文本</div>
		<div class="a3">测试文本</div>
		<div class="a4">测试文本</div>
		<div>测试文本</div>
	</body>

</html>

Copy after login

Rendering:

How to set margins in css

(Learning video sharing: css video tutorial)

The above is the detailed content of How to set margins in css. For more information, please follow other related articles on the PHP Chinese website!