1.什么是内边距? 边框和内容之间的距离就是内边距 2.格式 2.1非连写 padding-top: ; padding-right: ; padding-bottom: ; padding-left: ; 2.2连写 padding: 上 右 下 左; 2.这三个属性的取值省略时的规律 2.1上 右 下 左 > 上 右 下 > 左边的取值和右边的一样 2.2上 右 下 左 > 上 右 > 左边的取值和右边的一样 下边的取值和上边一样 2.3上 右 下 左 > 上 > 右下左边取值和上边一样 注意点: 1.给标签设置内边距之后, 标签占有的宽度和高度会发生变化 2.给标签设置内边距之后, 内边距也会有背景颜色
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>45-内边距属性</title> <style> div{ width: 98px; height: 90px; border: 1px solid #000; background-color: red; } .box1{ padding-top: 20px; } .box2{ padding-right:40px; } .box3{ padding-bottom:80px; } .box4{ padding-left:160px; } .box5{ /*padding:20px 40px 80px 160px;*/ /*padding:20px 40px 80px;*/ /*padding:20px 40px;*/ 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>