Padding | 学习笔记

简介: 快速学习 Padding。

开发者学堂课程【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个方向,这个属性的方向是顺时针方向:上,右,下,左,这个顺序

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

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

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

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

相关文章
|
20天前
|
Python 容器
`padx padding
`padx padding
10 2
|
9月前
|
前端开发
opacity和background的rgba区别
opacity和background的rgba区别
|
容器
【已解决】text-overflow: ellipsis; 不生效(除了white-space:nowrap;overflow: hidden;之外)
text-overflow: ellipsis; 不生效(除了white-space:nowrap;overflow: hidden;之外)
822 0
html+css实战100-border和padding
html+css实战100-border和padding
83 0
html+css实战101-border和padding尺寸
html+css实战101-border和padding尺寸
81 0
|
前端开发
CSS - 行内元素的 padding、margin、width、height、line-height 是否无效?
CSS - 行内元素的 padding、margin、width、height、line-height 是否无效?
393 0
CSS - 行内元素的 padding、margin、width、height、line-height 是否无效?
|
前端开发 开发者
margin | 学习笔记
快速学习 margin。
133 0
|
前端开发 开发者
善于使用父元素的 padding 而不使用子元素的 margin | 学习笔记
快速学习善于使用父元素的 padding 而不使用子元素的 margin 。
128 0
|
编解码 前端开发
SAP Spartacus里px,em和rem的应用
SAP Spartacus里px,em和rem的应用
SAP Spartacus里px,em和rem的应用