浏览器支持

所有浏览器都支持 padding 属性。

注释:任何的版本的 Internet Explorer (包括 IE8)都不支持属性值 "inherit"。

定义和用法

padding 简写属性在一个声明中设置所有内边距属性。

说明

这个简写属性设置元素所有内边距的宽度,或者设置各边上内边距的宽度。行内非替换元素上设置的内边距不会影响行高计算;因此,如果一个元素既有内边距又有背景,从视觉上看可能会延伸到其他行,有可能还会与其他内容重叠。元素的背景会延伸穿过内边距。不允许指定负边距值。

注释:不允许使用负值。

例子 1

padding:10px 5px 15px 20px;
  • 上内边距是 10px
  • 右内边距是 5px
  • 下内边距是 15px
  • 左内边距是 20px

例子 2

padding:10px 5px 15px;
  • 上内边距是 10px
  • 右内边距和左内边距是 5px
  • 下内边距是 15px

例子 3

padding:10px 5px;
  • 上内边距和下内边距是 10px
  • 右内边距和左内边距是 5px

例子 4

padding:10px;
  • 所有 4 个内边距都是 10px
值        描述
auto 浏览器计算内边距。
length 规定以具体单位计的内边距值,比如像素、厘米等。默认值是 0px。
% 规定基于父元素的宽度的百分比的内边距。
inherit 规定应该从父元素继承内边距。

默认值:0。

(十)学习CSS之padding属性的更多相关文章

  1. (十二)学习CSS之display属性

    参考:http://www.w3school.com.cn/cssref/pr_class_display.asp 浏览器支持 所有主流浏览器都支持 display 属性. 注释:如果规定了 !DOC ...

  2. (十二)学习CSS之box-sizing 属性

    参考:http://www.w3school.com.cn/cssref/pr_box-sizing.asp CSS3 box-sizing 属性 定义和用法 box-sizing 属性允许您以特定的 ...

  3. 深入学习css之background属性

    css中允许应用纯色作为背景,也允许使用图片作为背景. background一共有8个对应的属性: 1.background-color:颜色值 用于设定背景的颜色 有3种定义颜色的形式, 1, 颜色 ...

  4. (十一)学习CSS之float属性

    参考:http://www.w3school.com.cn/cssref/pr_class_float.asp 定义和用法 float 属性定义元素在哪个方向浮动.以往这个属性总应用于图像,使文本围绕 ...

  5. (五)学习CSS之line-height属性

    参考:http://www.jb51.net/w3school/css/pr_dim_line-height.htm line-height 属性设置行间的距离(行高). 注释:不允许使用负值. 值 ...

  6. 学习css之文本属性

    css3之文本属性: 1.缩进和水平对齐:text-indent, 通过使用 text-indent 属性,所有元素的第一行都可以缩进一个给定的长度,甚至该长度可以是负值. 这个属性最常见的用途是将段 ...

  7. 学习CSS布局 - dispaly属性

    "display"属性 display 是CSS中最重要的用于控制布局的属性. 每个元素都有一个默认的 display 值,这与元素的类型有关. 对于大多数元素它们的默认值通常是  ...

  8. (九)学习CSS之margin属性

    参考: 所有浏览器都支持 margin 属性. 注释:任何的版本的 Internet Explorer (包括 IE8)都不支持属性值 "inherit". 定义和用法 margi ...

  9. (八)学习CSS之line-style-type属性

    参考:http://www.w3school.com.cn/cssref/pr_list-style-type.asp 设置不同的列表样式: ul.circle {list-style-type:ci ...

随机推荐

  1. Android的ProgressBar以及自定义进度条

    1.xml文件 activity_main.xml <LinearLayout xmlns:android="http://schemas.android.com/apk/res/an ...

  2. install ruby and ruby gem

    sudo apt-get install ruby #find an folder and: git clone https://github.com/rubygems/rubygems.git cd ...

  3. Kinetic使用注意点--container

    <virtual> new Container(config) 参数: config:包含所有配置项的对象. { x: "横坐标", y: "纵坐标" ...

  4. DEVICE_ATTR的使用

    DEVICE_ATTR的使用 使用DEVICE_ATTR,可以在sys fs中添加“文件”,通过修改该文件内容,可以实现在运行过程中动态控制device的目的. 类似的还有DRIVER_ATTR,BU ...

  5. SecureCRT上传bash: rz: command not found(转载)

    转载自:http://blog.csdn.net/zhangdaiscott/article/details/18141017 -bash: rz: command not found rz命令没找到 ...

  6. html template

    https://wrapbootstrap.com/tag/single-page http://themeforest.net/ https://wrapbootstrap.com/themes h ...

  7. 使用Yeoman搭建 AngularJS 应用 (9) —— 让我们搭建一个网页应用

    原文地址:http://yeoman.io/codelab/install-packages.html 列出当前程序包 我们现在查看一下我们已经安装的程序包,输入下面的命令 bower list 查找 ...

  8. Recommender Systems引言

    我想站在大神肩膀上...貌似是计算所的一个小伙伴... 总结的很好,看得出来有一定的功底.... 不过对于自己看过了的东西,就不愿意再翻看第二遍了.恰好这本书和项亮那本很像,就直接看这本书了.顺便记记 ...

  9. Searching in a rotated and sorted array

    Given a sorted array that has been rotated serveral times. Write code to find an element in this arr ...

  10. 利用手上的UI资源(附免费UI工具包)

    http://www.uisdc.com/how-to-use-ui-kits# 大家都知道,UI工具包里有很多好看的资源:比如按钮.滑块.面包屑.播放器.表单,甚至是一个"赞!" ...