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

| | 0 | 9 | 267

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

本文标题:【HTML】CSS基础学习之盒子模型margin和padding的使用

文章作者:孤桜懶契

发布时间:2021年07月09日 - 10:45:02

最后更新:2022年05月20日 - 11:47:45

原始链接:https://gylq.gitee.io/posts/56.html

许可协议: 署名-非商业性使用-禁止演绎 4.0 国际 转载请保留原文链接及作者。

-------------------本文结束 感谢您的阅读-------------------
来发评论吧~
Powered By GYLQ
v1.4.16
欢迎光临
❤️
孤桜懶契
请多关照
❤️
❤️
看板娘
欢迎阅读「【HTML】CSS基础学习之盒子模型margin和padding的使用 | 孤桜懶契」