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像素

相关文章
|
2月前
|
前端开发
前端:行内元素的 margin 和 padding
在前端开发中,行内元素的处理是至关重要的。行内元素默认与其他元素在同一行显示,不会占据独立的空间。对于行内元素而言,其外边距(margin)和内边距(padding)的设置有特定规则:垂直方向上的外边距和内边距不会影响其他元素,但水平方向的则会增加元素的宽度,可能会影响相邻元素的位置。合理设置这些属性,可以有效控制页面布局与间距。
|
4月前
|
前端开发
一张图搞懂盒子模型 margin padding
这篇文章通过一张图帮助读者理解CSS中的盒子模型,特别是`margin`和`padding`的概念,解决容易混淆这两个属性的问题。
|
5月前
|
Android开发
android padding和margin的区别
android padding和margin的区别
39 0
|
7月前
|
Python 容器
`padx padding
`padx padding
35 2
|
C# 容器
WPF学习—Margin and Padding
WPF学习—Margin and Padding
|
容器
【已解决】text-overflow: ellipsis; 不生效(除了white-space:nowrap;overflow: hidden;之外)
text-overflow: ellipsis; 不生效(除了white-space:nowrap;overflow: hidden;之外)
1137 0
|
前端开发
CSS - 行内元素的 padding、margin、width、height、line-height 是否无效?
CSS - 行内元素的 padding、margin、width、height、line-height 是否无效?
515 0
CSS - 行内元素的 padding、margin、width、height、line-height 是否无效?
html+css实战100-border和padding
html+css实战100-border和padding
104 0
html+css实战101-border和padding尺寸
html+css实战101-border和padding尺寸
115 0
|
前端开发 开发者
margin | 学习笔记
快速学习 margin。
171 0