paddingmargin

Posted 2021-03-08 wfy680

padding属性设置一个元素的内边距，padding 区域指一个元素的内容和其边界之间的空间，该属性不能为负值。四个外边距属性设置分别是： padding-top， padding-right， padding-bottom 和 padding-left

1、指定一个值时 该值指定内容到四个边的内边距

padding: 50px;

 

marginPadding1.png

2、指定两个值时 第一个值指定内容到上下两边的内边距 第二个指定内容到左右两边的内边距

padding: 50px 20px;

 

padding2.png

3、指定三个值时第一个指定内容到上边的内边距.第二个指定内容到左右两边 第三个指定内容到下边的距离

padding: 50px 20px 10px;

 

padding3.png

4、指定四个值时分别为上 右 下 左（顺时针顺序）

padding: 50px 20px 10px 5px;

 

padding4.png

以上的样式设定了这个控件的宽度为200px、高度为200px，在改变margin和padding时内容区的大小是不变的

作者：FisherJiam
链接：https://www.jianshu.com/p/73deb2ae7992
来源：简书
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。