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.
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;
The top margin is 10px
The right margin is 5px
The bottom margin is 15px
The left margin is 20px
margin:10px 5px 15px;
The top margin is 10px
The right and left margins are 5px
The bottom margin is 15px
margin:10px 5px;
The top and bottom margins are 10px
The right and left margins are 5px
margin:10px;
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>Rendering:
(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!
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
