CSS Padding(填充)属性定义元素边框与元素内容之间的空间。


Padding(填充)

当元素的 Padding(填充)(内边距)被清除时,所"释放"的区域将会受到元素背景颜色的填充。

单独使用填充属性可以改变上下左右的填充。缩写填充属性也可以使用,一旦改变一切都改变。

可能的值

说明
length 定义一个固定的填充(像素, pt, em,等)
% 使用百分比值定义一个填充

填充- 单边内边距属性

在CSS中,它可以指定不同的侧面不同的填充:

实例

padding-top:25px;
padding-bottom:25px;
padding-right:50px;
padding-left:50px;

尝试一下 »


填充 - 简写属性

为了缩短代码,它可以在一个属性中指定的所有填充属性。

这就是所谓的缩写属性。所有的填充属性的缩写属性是"padding":

实例

padding:25px 50px;

尝试一下 »

Padding属性,可以有一到四个值。

  • 上填充为25px
  • 右填充为50px
  • 下填充为75px
  • 左填充为100px

  padding:25px 50px 75px;

  • 上填充为25px
  • 左右填充为50px
  • 下填充为75px

  padding:25px 50px;

  • 上下填充为25px
  • 左右填充为50px

  padding:25px;

  • 所有的填充都是25px

更多实例

在一个声明中的所有填充属性
这个例子演示了使用缩写属性设置在一个声明中的所有填充属性,可以有一到四个值。

设置左部填充
这个例子演示了如何设置元素左填充。

设置右部填充
这个例子演示了如何设置元素右填充。.

设置上部填充
这个例子演示了如何设置元素上填充。

设置下部填充
这个例子演示了如何设置元素下填充。


所有的CSS填充属性

属性 说明
padding 使用缩写属性设置在一个声明中的所有填充属性
padding-bottom 设置元素的底部填充
padding-left 设置元素的左部填充
padding-right 设置元素的右部填充
padding-top 设置元素的顶部填充

CSS Padding(填充)的更多相关文章

  1. css padding 填充

    语法: padding:[ <length> | <percentage> ]{1,4} 默认值:看每个独立属性 适用于:所有元素,除 table-row-group | ta ...

  2. CSS:CSS padding(填充)

    ylbtech-CSS:CSS padding(填充) 1.返回顶部 1. CSS padding(填充) CSS padding(填充)是一个简写属性,定义元素边框与元素内容之间的空间,即上下左右的 ...

  3. CSS padding

    CSS padding 是用来控制div table 内间距的,下面我们就来讲一下padding 实例吧.   CSS padding 利用CSS填充,你将能够更改默认的间隙内出现的各种HTML元素( ...

  4. CSS3——盒子模型 border(边框) 轮廓(outline)属性 margin外边距 padding填充

    盒子模型 包括——边距,边框,填充,和实际内容 Margin(外边距) - 清除边框外的区域,外边距是透明的. Border(边框) - 围绕在内边距和内容外的边框. Padding(内边距) - 清 ...

  5. padding 填充

    CSS padding(填充)是一个简写属性,定义元素边框与元素内容之间的空间,即上下左右的内边距. padding(填充) 当元素的 padding(填充)内边距被清除时,所释放的区域将会受到元素背 ...

  6. CSS padding margin border属性详解

    图解CSS padding.margin.border属性W3C组织建议把所有网页上的对像都放在一个盒(box)中,设计师可以通过创建定义来控制这个盒的属性,这些对像包括段落.列表.标题.图片以及层. ...

  7. CSS padding margin border属性详解【转载】

    本文转载自:http://www.cnblogs.com/linjiqin/p/3556497.html ,感谢相关博主. 图解CSS padding.margin.border属性 W3C组织建议把 ...

  8. 转-CSS padding margin border属性详解

    原文链接:http://www.cnblogs.com/linjiqin/p/3556497.html 图解CSS padding.margin.border属性W3C组织建议把所有网页上的对像都放在 ...

  9. 【转】图解CSS padding、margin、border属性

    http://www.cnblogs.com/linjiqin/p/3556497.html 图解CSS padding.margin.border属性W3C组织建议把所有网页上的对像都放在一个盒(b ...

随机推荐

  1. dfs 生成排列和组合

    利用深度优先搜索的性质可以方便的生成n的排列和组合,但是生成组合时每个组合里面元素的个数必须事先确定,以前以为生成组合跟排列一样到n时就可以回溯,直到今天做了某题之后才发现那是错的,那样做生成不了所有 ...

  2. Web---Cookie技术(显示用户上次登录的时间、显示用户最近浏览的若干个图片(按比例缩放))

    本章博客讲解: 1.Cookie基本用法演示 2.演示Cookie的访问权限 3.演示Cookie的删除 4.利用Cookie显示用户上次登录的时间 5.利用Cookie技术显示用户最近浏览的若干个图 ...

  3. Web---演示Servlet的相关类、表单多参数接收、文件上传简单入门

    说明: Servlet的其他相关类: ServletConfig – 代表Servlet的初始化配置参数. ServletContext – 代表整个Web项目. ServletRequest – 代 ...

  4. Web---演示servlet技术(servlet生命周期),解决中文乱码问题

    本节讲解决中文乱码问题的4种方法. 还有更好的方法,也就是用过滤器,这里就不演示了,博主目前也不会~呼♪(^∇^*)~过段时间才会学. servlet生命周期演示: index.jsp: <%@ ...

  5. Bzoj 1616: [Usaco2008 Mar]Cow Travelling游荡的奶牛 动态规划

    1616: [Usaco2008 Mar]Cow Travelling游荡的奶牛 Time Limit: 5 Sec  Memory Limit: 64 MBSubmit: 1006  Solved: ...

  6. Bzoj 4196: [Noi2015]软件包管理器 树链剖分

    4196: [Noi2015]软件包管理器 Time Limit: 10 Sec  Memory Limit: 512 MBSubmit: 721  Solved: 419[Submit][Statu ...

  7. 《University Calculus》-chape6-定积分的应用-求体积

    定积分一个广泛的应用就是在求解一些“看似不规则”的几何体的体积,之所以说看似不规则,是因为不规则之下还是有一定的“规则性”可言的,我们就是需要抓住这些线索进行积分运算得到体积. 方法1:切片法. 这里 ...

  8. head frist 设计模式学习之 JVM中的博物馆奇妙夜(观察者模式)

    博物馆奇妙夜! 博物馆奇妙夜!博物馆奇妙夜!重说三!!!JVM看了<博物馆奇妙夜>电影之后,决定在自己家里开一个博物馆!毕竟需要什么new一下就好,博物馆很快就开起来了,并且任命你为馆长( ...

  9. Cleaner Robot - CodeForces 589J(搜索)

    有一个M*N的矩阵,有一个会自动清洁的机器人,这个机器人会按照设定好的程序来打扫卫生,如果当前方向前面可以行走,那么直接走,如果不可以走那么会向右转动90度,然后回归上一步判断.求机器人最多能打扫的面 ...

  10. Java如何等待子线程执行结束

    工作中往往会遇到异步去执行某段逻辑, 然后先处理其他事情, 处理完后再把那段逻辑的处理结果进行汇总的产景, 这时候就需要使用线程了. 一个线程启动之后, 是异步的去执行需要执行的内容的, 不会影响主线 ...