精华内容
下载资源
问答
  • padding 简写属性在一个声明中设置所有内边距属性。 说明 这个简写属性设置元素所有内边距的宽度,或者设置各边上内边距的宽度。行内非替换元素上设置的内边距不会影响行高计算;因此,如果一个元素既有内边距...

    实例


    设置 p 元素的 4 个内边距:

    p {
      padding:2cm 4cm 3cm 4cm;
      }

    定义和用法


    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 规定应该从父元素继承内边距。
    展开全文
  • CSS padding 属性CSS 单边内边距属性

    千次阅读 2020-02-15 19:34:24
    元素的内边距边框和内容区之间。控制该区域最简单的属性padding 属性CSS padding 属性定义元素边框与...padding是比较常用CSS样式,可以利用padding内边距设置上、下、左、右对象内容与四个边距距离间隔...

    元素的内边距在边框和内容区之间。控制该区域最简单的属性是 padding 属性。

    CSS padding 属性定义元素边框与元素内容之间的空白区域。

    CSS padding 属性

    CSS padding 属性定义元素的内边距。padding 属性接受长度值或百分比值,但不允许使用负值。padding是比较常用CSS样式,可以利用padding内边距设置上、下、左、右对象内容与四个边距距离间隔。

    语法结构:padding : +数值+单位 或 百分比数值

    例如,如果您希望所有 h1 元素的各边都有 10 像素的内边距,只需要这样:

    h1 {padding: 10px;}

    您还可以按照上、右、下、左的顺序分别设置各边的内边距,各边均可以使用不同的单位或百分比值:

    h1 {padding: 10px 0.25em 2ex 20%;}

    如上如果提供两个,第一个用于上-下,第二个用于左-右。

    如果提供三个,第一个用于上,第二个用于左-右,第三个用于下。

    CSS 单边内边距属性

    可以通过使用下面四个单独的属性,分别设置上、右、下、左内边距:padding-top、padding-right、padding-bottom、padding-left

    1、padding-left 设置对象距离左边的边距补白间隔

    2、padding-right 设置对象距离右边的边距补白间隔

    3、padding-top 设置对象距离上边的边距补白间隔

    4、padding-bottom 设置对象距离下边的边距补白间隔

    您也许已经想到了,下面的规则实现的效果与上面的简写规则是完全相同的:

    h1 {
    padding-top: 10px;
    padding-right: 0.25em;
    padding-bottom: 2ex;
    padding-left: 20%;
    }

    试想下,如果“三边相同,一边值不同”你还会如何编写样式呢?

    根据实践经验,如果仅仅是上面这些处理,往往是无法应对实际需求的,存在一些“致命问题”。新建一个前端学习qun438905713,在群里大多数都是零基础学习者,大家相互帮助,相互解答,并且还准备很多学习资料,欢迎零基础的小伙伴来一起交流。

    CSS 内边距的百分比数值

    前面提到过,可以为元素的内边距设置百分数值。百分数值是相对于其父元素的 width 计算的,这一点与外边距一样。所以,如果父元素的 width 改变,它们也会改变。

    下面这条规则把段落的内边距设置为父元素 width 的 10%:

    p {padding: 10%;}

    例如:如果一个段落的父元素是 div 元素,宽度为200px,那么这个段落的内边距设置为padding:10%,相当于padding:20px

    注意:上下内边距与左右内边距一致;即上下内边距的百分数会相对于父元素宽度设置,而不是相对于高度。

    展开全文
  • CSS中padding属性的参数顺序

    千次阅读 2010-07-09 11:36:00
    Padding属性网站建设的过程是必不可少的,它的主要作用就是设定对象四边的补丁边距,padding可以说给我们带来的麻烦不少,最大的一个就是浏览器兼容性问题,这里先抛开这个不说了,单来分析一下padding参数...

    Padding属性是在网站建设的过程中是必不可少的,它的主要作用就是设定对象四边的补丁边距,padding可以说给我们带来的麻烦不少,最大的一个就是浏览器兼容性问题,这里先抛开这个不说了,单来分析一下padding中参数属性的作用规则,也就是哪个参数对应哪个补丁,从例子说起。

    test{padding:10px 12px 14px 16px}

    这里所有的参数都有了,那么它们的作用顺序是上右下左。

    Test{padding:10px 12px 14px}

    这里有3个参数,那么它们的作用顺序是第一个参数是用于上方,第二个参数是用于左右方向,第三个参数是用于下方。

    Test{padding: 10px 12px}

    这里是只有2个参数的时候,第一个参数是作用于上下方向,第二个参数是左右方向。

    Test{padding:10px;}

    只有一个参数的时候,是作用于四个方向。

    小小整理,如果不当之处请大家指正.

    展开全文
  • CSS padding 属性

    千次阅读 2008-01-06 19:49:00
    定义padding属性用于在一个声明中设置所有padding属性的简写属性。注释:不允许使用负值。继承性:No JavaScript 语法CSS属性也可通过一段JavaScript被动态地改变。脚本语法:object.style.padding="2cm"我们的...

    定义

    padding属性是用于在一个声明中设置所有padding属性的简写属性。

    注释:不允许使用负值。

    继承性:No

     

    JavaScript 语法

    CSS属性也可通过一段JavaScript被动态地改变。

    脚本语法:

    object.style.padding="2cm"

    在我们的HTML DOM教程中,您可以找到更多有关padding属性的细节。

    在我们的HTML DOM教程中,您也可以找到完整的Style对象参考手册

    例子

    四个边的padding均为10px:

    h1 {padding: 10px}

    顶边和底边的padding为10px,左边和右边的padding是父元素宽度的2%:

    h1 {padding: 10px 2%}

    顶边的padding为10px,左边和右边的padding是父元素宽度的2%,底边的padding是15px:

    h1 {padding: 10px 2% 15px}

    顶边的padding为10px,右边的padding是父元素宽度的2%,底边的padding是15px,而左边的padding是20px:

    h1 {padding: 10px 2% 15px 20px}

    可能的值

    描述
    • padding-top
    • padding-right
    • padding-bottom
    • padding-left

    设置填充padding。

    值可以是:

    • 百分比(基于父元素宽度的百分比)
    • 长度值(固定的padding值)

    默认值:未定义。

    TIY 实例

    所有填充属性在一个声明中
    本例演示使用简写属性将所有的填充属性设置于一个声明中,可以有一到四个值。
    展开全文
  • CSS padding 属性 CSS padding 属性定义元素边框与元素内容之间的空白区域,不可见。如果想调整盒子的大小可以调整内容区,内边距,边框。 CSS padding 属性定义元素的内边距。padding 属性接受长度值或百分比值,...
  • 图解CSS padding、margin、border属性W3C组织建议把所有网页上的对像都放在一个盒(box),设计师可以通过创建定义来控制这个盒的属性,这些对像包括段落、列表、标题、图片以及层。盒模型主要定义四个区域:内容...
  • CSS padding margin border属性详解 CSS padding margin border属性详解 padding margin border
  • CSS padding margin border属性详解图解CSS padding、margin、border属性 W3C组织建议把所有网页上的对像都放在一个盒(box),设计师可以通过创建定义来控制这个盒的属性,这些对像包括段落、列表、标题、图片...
  • CSS 盒模型之内边距 padding属性

    千次阅读 2018-02-16 22:10:47
    设置内边距的最简单办法就是使用 padding属性,其值可以是百分比、长度值,默认值是 0,不允许负值。内边距是可选的,默认值是 0。所以,如果没有显式声明 padding属性,元素就不会出现内边距。但是,浏览器却为许多...
  • 查看了CSS的标准文档,其中是这样规定的: 如果只提供一个,将用于全部的四条边; 如果提供两个,第一个用于上-下,第二个用于左-右; 如果提供三个,第一个用于上,第二个用于左-右,第三个用于下; ...
  • CSS 内边距属性 paddingCSS 内边距属性padding 属性 CSS 内边距属性 ...1.一个声明,一次性设置所有内边距属性padding 1 都支持。IE 所有版本 不支持 属性值 inherit。 2.元素的 下内边距...
  • CSS中padding可以指定不同的侧面不停的填充: 比如: padding-top:30px; //上内边距是30px padding-bottom:60px; //下内边距是60px padding-right:30px; //右内边距是30px padd...
  • CSSpadding,margin,border属性

    千次阅读 2014-06-01 09:48:53
    图解CSSpadding,margin,border属性(详细介绍及举例说明) 图解CSSpadding,margin,border属性 W3C组织建议把所有网页上的对像都放在一个盒(box),设计师可以通过创建定义来控制这个盒的属性,这些对...
  • 默认情况下,内部元素(如:... box-sizing 是 CSS3 的属性,可以设置以上值: 1. content-box: 元素 size 不包含 border 和 padding,默认值。 2. border-box: 元素 size 包含 border 和 pa...
  • css中float属性和position属性详解

    千次阅读 2018-08-08 08:41:15
    以往这个属性总应用于图像,使文本围绕图像周围,不过 CSS ,任何元素都可以浮动。浮动元素会生成一个块级框,而不论它本身是何种元素。 如果浮动非替换元素,则要指定一个明确的宽度;否则,它们会尽可能地...
  • 盒模型基本属性有两个:padding和margin。 以边框border为界,边框里面是内边距,边框外面是外边距。 一.外边距margin: 外边距是指边框以外与其他同级元素之间的距离,外边距可以控制同级元素之间的距离( 用于设置...
  • 这篇文章是转载的,对于理解css中的margin/padding/border这些概念很有帮助CSS 有个重要的概念,就是盒子模式 (Box model)。胡戈的"一个馒头引发的血案"有个圆圈套圆圈娱乐城,而这个盒子模式套用这句话来说,...
  • padding 属性是css用于在一个声明中设置所有 padding 属性的简写属性。 Padding属性包含了: padding left :左补距离(设置距左内边距) ; padding top:头顶补距离(设置距顶部内边距); padding right :右补...
  • 图解CSSpadding,margin,border属性 W3C组织建议把所有网页上的对像都放在一个盒(box),设计师可以通过创建定义来控制这个盒的属性,这些对像包括段落、列表、标题、图片以及层。盒模型主要定义四个区域:...
  • 框结构模型图一: 元素框的最内部分是实际的内容,直接包围内容的是内边距。内边距呈现了元素的背景。内边距的边缘是边框。...CSS padding 属性 padding 属性接受长度值或百分比值,但不允
  • CSS background属性之背景设置详解

    千次阅读 2015-11-18 17:49:07
    在CSS中,关于background属性,主要有5个相关的背景属性。如下所示: background-color属性设置背景颜色。background-image属性设置背景图片。background-repeat属性:是否重复背景图片。background-...
  • 图解CSSpadding,margin,border属性 margin:边缘,所以他整体结构的最外边 border:边界,什么的的边界?是margin和padding的边界 padding:填充,填充这个动作显然是往里填的动作,所以增加padding的值后,...
  • 图解CSS padding、margin、border属性 W3C组织建议把所有网页上的对像都放在一个盒(box),设计师可以通过创建定义来控制这个盒的属性,这些对像包括段落、列表、标题、图片以及层。盒模型主要定义四个区域:内容...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 56,970
精华内容 22,788
关键字:

在css中padding属性用于设置