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. t-sql 中between and 的一种写法

    t-sql 中between and 的一种写法: where GETDATE() BETWEEN BeginDateTime AND EndDateTime; BeginDateTime,EndDa ...

  2. 浅谈pageobject模式

    先来看两段代码 代码1: package com.zlshuo.selenium.nonaming.pageobject; /** * @author leshuo * @version 2014年5 ...

  3. 基于Noootes/Dooomino的文档工作流系统(转)

    (流程样例应用程序终于整理上传好可供下载了http://download.csdn.net/download/starrow/8422299) 上文分析了我们的流程配置使用三类对象,分别对应三类文档: ...

  4. Python手动构造Cookie模拟登录后获取网站页面内容

    最近有个好友让我帮忙爬取个小说,这个小说是前三十章直接可读,后面章节需要充值VIP可见.所以就需要利用VIP账户登录后,构造Cookie,再用Python的获取每章节的url,得到内容后再使用 PyQ ...

  5. uva 3523 Knights of the Round Table

    题意:给你n,m n为有多少人,m为有多少组关系,每组关系代表两人相互憎恨,问有多少个骑士不能参加任何一个会议. 白书算法指南 对于每个双联通分量,若不是二分图,就把里面的节点标记 #include ...

  6. [ZETCODE]wxWidgets教程四:菜单栏和工具栏

    本教程原文链接:http://zetcode.com/gui/wxwidgets/menustoolbars/ 翻译:瓶哥 日期:2013年11月28日星期四 邮箱:414236069@qq.com ...

  7. 转载:C++之高精度算法

    C++之高精度算法 注意:本文转载自http://blog.sina.com.cn/s/blog_4fdb102b010087ng.html,十分感谢原作者:忍者    前言:由于计算机运算是有模运算 ...

  8. C# 动态创建出来的窗体间的通讯 delegate2

    附件:http://files.cnblogs.com/xe2011/CSharp_WindowsForms_delegate02.rar 窗体2 和窗体3 都是动态创建出来的 现在 FORM3.TE ...

  9. Centos安装成功mysql-5.5.37

    摘自http://www.2cto.com/os/201404/296364.html(原文请关注) 这几天在centos下装mysql,这里记录一下安装的过程,方便以后查阅 Mysql5.5.37安 ...

  10. [Javascript] IIFE

    Javascript modules are a design pattern that allow you to encapsulate your code into smaller self ma ...