<!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 可以让块级元素水平居中 -->