<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>padding和margin的用法</title>
<style>
.box{
width:200px;
height:200px;
background:tan; /*1个参数：4边*/
padding:30px;
/*2个参数：上下 左右*/
padding:10px 20px;
/*3个参数：上 左右 下*/
padding:10px 20px 30px;
/*4个参数：上 右 下 左*/
padding:10px 20px 30px 40px; /*padding-top:10px;
padding-right:20px;*/ /*margin:0 100px;*/ /*margin-left:auto;
margin-right:auto;*/ /*让块级元素水平居中*/
margin:0 auto;
}
b{
background:orange;
/*margin:0 auto;*/
/*给行级标签的父元素加text-align:center就可以让行级元素居中*/
text-align:center;
}
</style>
</head>
<body>
<div style="text-align:center"><b>行级标签</b></div>
<div class="box">你们峰哥跟我说：他一直就很喜欢小林子！那不直的时候呢？</div>
</body>
</html>
<!--
padding 内边距
padding 统一设置内边距
padding:4边
padding:上下 左右
padding:上 左右 下
padding:上 右 下 左
padding-top
padding-right
padding-bottom
padding-left margin 外边距
margin 统一设置外边距
margin:4边
margin:上下 左右
margin:上 左右 下
margin:上 右 下 左
margin-top
margin-right
margin-bottom
margin-left 小提示：margin:0 auto 可以让块级元素水平居中
-->