image.png

padding复合简写

image.png
简写属性。为元素设置所有四个方向（上右下左）的内边距。

  • padding属性接受1~4个参数值。如果提供四个参数值，将按上、右、下、左的顺序作用于四边；提供三个，第一个用于上，第二个用于左、右，第三个用于下；提供两个，第一个用于上、下，第二个用于左、右；只提供一个，同时用于四边。
  • 需要注意的是，当我们为行内元素定义纵向内内边距（padding-top/padding-bottom）时，虽然不需要将之转化为行内块或者块级，但是给行内元素设置纵向内边距并不会影响布局。内边距会在当前元素的行框基础上向顶部和顶部外延，但是这些外延不会拓展新的布局大小（你甚至可以把它想象成类似outline）。
  • 对应的脚本特性为：padding。

分拆独立属性。为元素单独设置上、右、下、左4个方向的内边距。

  • 对应的脚本特性分别为：paddingTop, paddingRight, paddingBottom, paddingLeft。

padding撑开盒子

image.png
如果在盒子中设置了宽width或者高height的属性，则内边距padding的设置会撑开盒子，使其比原本设置的宽高像素更大。

  1. div {
  2.   width: 200px;
  3.   hegith: 100px;
  4.   backgroud-color: bule;
  5.   padding: 20px
  6. }

image.png
但是如果样式中没有设置宽或高，则不会在该方向上撑开盒子。意思是，设置了高就会撑开高度，设置了宽就会撑开宽度，不设置就不会在该方向上撑开。
如下所示：因为块级元素的默认宽度是父亲元素宽度的100%，但是我们没有明确写出width属性的话，padding就不会撑开盒子。

  div {
    background-color: pink;
    width: 300px;
    height: 300px;
  }

  div p {
    background-color: skyblue;
    height: 100px;
    padding-right: 100px;
  }

image.png