CSS填充

2023-09-21 82

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

一、Padding(填充)

CSS Padding (填充) 属性用于定义元素边框与元素内容之间的空间,当我们清除元素的填充时,会释放出一定的区域。这些被释放的区域将会受到元素背景颜色的填充效果。填充属性可以分别设置上、下、左、右四个方向的值,也可以使用缩写形式来一次性改变所有方向的填充,使用缩写填充属性一旦改变填充值,就会同时影响元素的上下左右填充。

二、可能的值

CSS填充

注意:CSS padding 属性可以使用长度值或百分比值,但与 margin 属性不同, padding 属性不允许使用负值。

三、内边距百分比数值

CSS Padding (填充) 属性中的百分比数值是相对于其父元素的宽度进行计算的。如果改变了父元素的宽度,填充属性所使用的百分比数值也会相应地进行调整。例如,如果将父元素的宽度增加或减少,填充属性中的百分比值也会相应地增加或减少,以适应新的父元素宽度。

以下是将段落的内边距设置为父元素 width 的 20% 的示例:

p {padding: 20%;}

假设一个段落的父元素是 div 元素,那么它的 padding 的 width 计算是根据 div 进行的:

实例:

<div style="width: 200px;"> 
<p>这个段落包含在一个宽度为200像素的DIV中。</p> 
</div>

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

四、单边内边距属性填充

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

实例:

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

五、简写属性填充

为了缩短代码和简化样式表,CSS 提供了一种缩写属性”padding”来同时指定所有填充属性。通过使用”padding”属性,我们可以在一个声明中同时设置上下左右四个方向的填充值。

实例:

padding:25px 50px;

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

padding:25px 50px 75px 100px;
  • 上填充为25px
  • 右填充为50px
  • 下填充为75px
  • 左填充为100px
padding:25px 50px 75px;
  • 上填充为25px
  • 左右填充为50px
  • 下填充为75px
padding:25px 50px;
  • 上下填充为25px
  • 左右填充为50px
padding:25px;
  • 所有的填充都是25px

六、所有CSS填充属性

CSS填充

  • 广告合作

  • QQ群号:707632017

温馨提示:
1、本网站发布的内容(图片、视频和文字)以原创、转载和分享网络内容为主,如果涉及侵权请尽快告知,我们将会在第一时间删除。邮箱:2942802716#qq.com(#改为@)。 2、本站原创内容未经允许不得转裁,转载请注明出处“站长百科”和原文地址。
CSS填充
上一篇: Z-BlogPHP API设计
CSS填充
下一篇: CSS定位