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. HDOJ--1698

    Just a Hook Time Limit: 4000/2000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others)Total ...

  2. Ignatius and the Princess IV

    Ignatius and the Princess IV Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32767 K ( ...

  3. jquery+NHibernate3.3.3+MVC的分页效果

    目录结构 先设计数据表结构 DROP SEQUENCE BDLLY_2V.SEQ_CUSTOMER; CREATE SEQUENCE BDLLY_2V.SEQ_CUSTOMER START MAXVA ...

  4. winform代码反编译后图片等资源文件恢复解决方案

    用Reflector工具反编译的winform代码,图片等资源文件不能很好的反编译成功. 这里有一个笨的解决方案.首先我们要了解图片资源当初加入到工程的几种方式,及他们所在的位置. 一般winform ...

  5. Red5空项目的理解

    在经过三天的苦恼之后,我终于对Red5的工作流程有点了解了.这样一来对要做的项目总算不会太瞎了.出于个人感受,认为下面所讲述的内容对初学者理解Red5以及基于Red5开发有很大的帮助,因此记录下来. ...

  6. 用chrome按F12抓包 页面跳转POST一瞬间就闪没了

  7. Hadoop 2.4.0新特性介绍

    在2014年4月7日,Apache公布了Hadoop 2.4.0 .相比于hadoop 2.3.0,这个版本号有了一定的改进,突出的变化能够总结为下列几点(官方文档说明): 1 支持HDFS訪问控制列 ...

  8. C# 可访问一致性不一致

    出现原因,其中一个是返回参数的访问级别小于函数的访问级别, 也就是说当定义一个返回参数的方法的时候,如果返回参数的访问级别低于方法的访问级别就会出现这样的错误,这个是可以理解的,如果返回的参数不能被访 ...

  9. AndroidManifest.xml解释说明和android的启动过程

    1.android清单文件:AndroidManifest.xml 说明如下: <?xml version="1.0" encoding="utf-8"? ...

  10. android开发之bitmap使用

    bitmap是android中重要的图像处理工具类,通过bitmap可以对图像进行剪切.旋转.缩放等操作,同时还可以指定格式和压缩质量保存图像文件. 一.拿到一个Bitmap对象 查看源码我们知道,B ...