html padding如何设置内边距,内边距：padding - CSS

内边距padding，又常常被称为“补白”，它指的是内容区到边框之间的那一部分。内边距都是在边框内部的。

一、padding局部样式

从CSS盒子模型中我们可以看出，内边距分为4个方向：padding-top、padding-right、padding-bottom、padding-left。

语法：

padding-top: 像素值;

padding-right: 像素值;

padding-bottom: 像素值;

padding-left: 像素值;

举例：

{

display:inline-block; /*将块元素转换为inline-block元素*/

padding-top:20px;

padding-right:40px;

padding-bottom:60px;

padding-left:80px;

border:2px solid red;

background-color:#FFDEAD;

}

绿叶学习网

浏览器预览效果如下图所示。

二、padding简写形式

跟border属性一样，padding属性也有简写形式。在实际开发中，我们往往使用简写形式，因为这样开发效率更高。padding写法有3种，如下所示。

语法：

padding: 像素值;

padding: 像素值1 像素值2;

padding: 像素值1 像素值2 像素值3 像素值4;

说明：

padding:20px表示4个方向的内边距都是20px。

padding:20px 40px表示padding-top和padding-bottom为20px，padding-right和padding-left为40px。

padding:20px 40px 60px 80px表示padding-top为20px，padding-right为40px，padding-bottom为60px，padding-left为80px。大家按照顺时针方向记忆就可以了。

举例：

{

display:inline-block; /*将块元素转换为inline-block元素*/

padding:40px 80px;

margin:40px;

border:2px solid red;

background-color:#FFDEAD;

}

绿叶学习网

浏览器预览效果如下图所示。

分析：

如果你想要让文本在一个元素内部居中，可以使用padding来实现，就像这个例子一样。

html padding如何设置内边距,内边距：padding - CSS | 绿叶学习网相关推荐

mac redis 链接_在Ubunt/Mac系统安装Redis以及设置Redis密码并且允许远程连接 - Laravel学习网...
REmote DIctionary Server(Redis) 是一个由Salvatore Sanfilippo写的key-value存储系统. Redis是一个开源的使用ANSI C语言编写.遵守B ...
iOS 设置UILabel 的内边距
iOS 设置UILabel 的内边距 - (void)drawTextInRect:(CGRect)rect {UIEdgeInsets insets = {0, 5, 0, 5};[super dr ...
如何设置UILabel的内边距？
最近在项目中,有个地方需要设置UILabel的内边距,即字体和Label控件之间的间隙.UILabel不像UIButton那样,有个contentEdgeInsets.titleEdgeInsets. ...
css内边距外边距和边框
关于css内边距外边距和边框的一些介绍 1.margin 外边距是指相邻同辈元素之间的距离. 相邻元素块的margin叠加显示如上图所示两个元素块的margin值都设置为50px. 2.paddi ...
外边距+内边距+边框详解
外边距+内边距+边框详解外边距(margin) margin可以设置盒子和盒子之间的距离若想要盒子水平居中,则必须满足两个条件: (1).盒子必须设置宽度 (2).让左右外边距为auto(marg ...
【CSS】盒子模型内边距 ② ( 内边距复合写法 | 代码示例 )
文章目录一.内边距复合写法 1.语法 2.代码示例 - 设置 1 个值 3.代码示例 - 设置 2 个值 4.代码示例 - 设置 3 个值 5.代码示例 - 设置 4 个值一.内边距复合写法 1. ...
android 外边距,外边距（padding）重叠的及解决办法
两个或多个块级盒子的垂直相邻边界会重合.结果的边界宽度是相邻边界宽度中最大的值.如果出现负边界,则在最大的正边界中减去绝对值最大的负边界.如果没有正边界,则从零中减去绝对值最大的负边界.注意:相邻的盒 ...
CSS边框设置以及内外边距的使用
1.边框该border属性为以下属性的简写属性.例如:border:1px solid black; border-width表示边框的粗细,可以是medium,thick等,一般使用数字加单位组合 ...
Foxmail记事插入的表格怎么设置单元格边距
Foxmail在使用记事时候,插入了表格,该怎么设置单元格的边距呢?下面我们就来看看详细的教程. Foxmail记事插入的表格怎么设置单元格边距? 1.下载并安装Foxmail邮件客户端. Foxma ...

html padding如何设置内边距,内边距：padding - CSS | 绿叶学习网

html padding如何设置内边距,内边距：padding - CSS | 绿叶学习网相关推荐

最新文章

热门文章