【HTML】CSS基础学习之盒子模型margin和padding的使用

admin
admin
admin
104956
文章
87
评论
2022年1月10日03:31:39评论11 views字数 976阅读3分15秒阅读模式

CSS基础学习四盒子模型margin和padding的使用

image-20210709104702050

demo5（margin设置代码）

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
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
 
<!DOCTYPE html>
<html> 
<head>
    <meta charset="UTF-8">  <!--字符集 -->
    <title>demo5</title>
    <!--盒子模型、margin、padding学习-->
  	<style>
  	.div1{
  		margin-top: 20px;
  		margin-left: 30px;
  		margin-bottom: 50px;
  		margin-right: 30px;  		
  		/*margin: 20px;*/  
  		/*margin 外边距*/
  	}
  	.div1,.div2,.div3{
  		width: 400px;
  		height: 400px;
  		background: red;
  		border: 5px solid blue;
  	}
  	.div3{
  		/*margin: 10px 20px 30px 40px;*/ /*上右下左*/
  		margin: 0px auto;
  	}

  </style>
</head>
<body>
	<div class="div1">
		demo5
	</div>
	<div class="div2">
		demo5
	</div>
	<div class="div3">
		demo5
	</div>
 </body>
</html>

demo6（padding和margin差不多的设置代码）

image-20210709104832921

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
 
<!DOCTYPE html>
<html> 
<head>
    <meta charset="UTF-8">  <!--字符集 -->
    <title>demo6</title>
    <!--盒子模型、margin、padding学习-->
  	<style>
  		.div1{
  			width: 400px;
  			height: 400px;
  			background: red;
  			/*用法和margin差不多*/
  			padding: 10px 20px 30px 40px;
  		}
  </style>
</head>
<body>
	<div class="div1">
		demo5
	</div>
 </body>
</html>

我的个人博客

孤桜懶契：http://gylq.github.io

FROM:gylq.gitee Author:孤桜懶契

  • 左青龙
  • 微信扫一扫
  • weinxin
  • 右白虎
  • 微信扫一扫
  • weinxin
admin
  • 本文由 发表于 2022年1月10日03:31:39
  • 转载请保留本文链接(CN-SEC中文网:感谢原作者辛苦付出)：
                   【HTML】CSS基础学习之盒子模型margin和padding的使用https://cn-sec.com/archives/729964.html

发表评论

匿名网友 填写信息