且构网

分享程序员开发的那些事...
且构网 - 分享程序员编程开发的那些事

Padding | 学习笔记

更新时间:2022-09-07 23:18:14

开发者学堂课程【CSS 快速掌握Padding】学习笔记,与课程紧密联系,让用户快速学习知识。

课程地址:https://developer.aliyun.com/learning/course/611/detail/9192


Padding

 

内容介绍

一、 小属性

二、简写属性


Padding 是“内填充”的意思,指的是盒子中间的内容到边框这一段的距离,padding 有4个方向

描述四个方向 padding 的2种方法:


一、 小属性

Padding-top:上内填充

Padding-right:右内填充

Padding-bottom:下内填充

Padding-left:左内填充

 

二、简写属性

Padding:这个属性是有方向的,同时表示4个方向,这个属性的方向是顺时针方向:上,右,下,左,这个顺序

Padding:20px; 表示上右下左四个方向填充都为20像素

Padding:10px 20px;表示上下为10像素,左右为20像素

Padding:10px 20px 30px;表示上为10像素,左右为20像素,下为30像素

Padding:10px 20px 30px 40px;表示上为10像素,左为20像素,右为30像素,下为40像素