<!DOCTYPE html>
<html>
<head>
	<title></title>
	<style type="text/css">
		 div{
            width: 98px;
            height: 90px;
            border: 1px solid #000;
            background-color: red;
        }
        .box1
        {
        	padding-top: 20px;
        }
        .box2
        {
        	padding-top: 40px;
        }
        .box3
        {
        	padding-top: 80px;
        }
        .box4
        {
        	padding-top: 160px;
        }
        .box5
        {
        	padding:20px;
        }
	</style>
</head>
<body>
<div class="box1">我是文字我是文字我是文字我是文字我是文字我是文字我是文字</div>
<hr>
<div class="box2">我是文字我是文字我是文字我是文字我是文字我是文字我是文字</div>
<hr>
<div class="box3">我是文字我是文字我是文字我是文字我是文字我是文字我是文字</div>
<hr>
<div class="box4">我是文字我是文字我是文字我是文字我是文字我是文字我是文字</div>
<hr>
<div class="box5">我是文字我是文字我是文字我是文字我是文字我是文字我是文字</div>
</body>
</html>

css中padding与margin的奥秘_内边距

核心：1.什么是内边距?
边框和内容之间的距离就是内边距
注意点:
1.给标签设置内边距之后, 标签占有的宽度和高度会发生变化
2.给标签设置内边距之后, 内边距也会有背景颜色

margin：

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<style type="text/css">
		*{
            padding:0;
            margin:0;
        }
        
        span
        {
        	display: inline-block;
        	width: 100px;
        	height: 100px;
        	border:1px solid red;
        	background: yellow;
        }
        div
        {
        	height: 100px;
        	border: 1px solid red;
        }
        .box1{
            
            margin:20px;
        }

	</style>
</head>
<body>
<span class="box1">我是span</span><span class="box2">我是span</span><span class="box3">我是span</span><div class="box4"></div>

</body>
</html>

1.什么是外边距?
标签和标签之间的距离就是外边距

注意点:
外边距的那一部分是没有背景颜色的