margin and padding
Marigin and padding benchmark
Both maigin and padding have a percentage value, and his percentage is based on the width of his parent element.
<div class="father">
<div class="child"></div>
</div>
<style>
.father {
width: 300px;
height: 200px;
border: 1px dashed red;
}
.child {
width: 150px;
height: 100px;
border: 1px solid #cccccc;
margin-top: 10%; // padding Similarly, no longer repeat
margin-left: 10%;
}
</style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
Centered
Centering is the most common requirement in the css layout, and there are many ways to center. Here are some simple ones that I use often.
Text centered
Text
<div class="content">Text</div>
<style lang="scss">
.content {
width: 100px;
height: 100px;
text-align: center;
line-height: 100px; // Parent element height (percentage will be reported)
}
</style>
1
2
3
4
5
6
7
8
9
10
11
2
3
4
5
6
7
8
9
10
11
Picture centered
<div class="container">
<img width="100" height="100" src="/img/css-margin.jpeg" >
<div class="iblock"></div>
</div>
<style lang="scss">
.container {
margin-top: 20px;
border: 1px solid #ccc;
width: 150px;
height: 150px;
text-align: center;
}
.container img {
vertical-align: middle;
}
.iblock {
display: inline-block;
vertical-align: middle;
height:100%;
width:0;
}
</style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
Flex centered
Flex centering is a property of flex, which is compatible with the mobile end. This is not detailed and will be introduced in the flex layout below. Flex layout