CSS盒子模型以内边距(padding)

  1. 内边距的设置
    内边距跟边框同样,分为上、下、左、右4个方向的内边距,
属性 描述
padding 简写属性,同时设置边框4个方向的内边距
padding-bottom 设置下内边距
padding-left 设置左内边距
padding-right 设置右内边距
padding-top 设置上内边距

内边距设置语法以下:css

padding:padding_value [padding_value] [padding_value] [padding_value] [padding_value];
padding-方向:padding_value;

padding_value参数说明:web

参数值 描述
auto 浏览器计算内边距
length 以px、em、cm等为单位的某个具体正数数值做为内边距值,默认为0
% 基于父级元素的宽度来计算内边距
inherit 继承父级元素的内边距
  • 指定1个值时,表示4个方向的内边距都同样。
  • 指定2个值时,第一个值设置上、下内边距,第二个值设置左、右内边距。
  • 指定3个值时,第一个值设置上内边距,第二个值设置左、右内边距,第三个值设置下内边距。
  • 指定4个值时,各个值按顺时针方向依次设置上、右、下、左内边距。

注:若是对盒子设置背景,那么背景会延申到padding区域。浏览器