整合营销服务商

电脑端+手机端+微信端=数据同步管理

免费咨询热线:

CSS padding 属性

设置一个P元素的填充:

p

{

padding:2cm 4cm 3cm 4cm;

}


属性定义及使用说明

padding 简写属性在一个声明中设置所有填充属性。该属性可以有1到4个值。

实例:

  • padding:10px 5px 15px 20px;

  • 上填充是 10px

  • 右填充是 5px

  • 下填充是 15px

  • 左填充是 20px

  • padding:10px 5px 15px;

  • 上填充是 10px

  • 右填充和左填充是 5px

  • 下填充是 15px

  • padding:10px 5px;

  • 上填充和下填充是 10px

  • 右填充和左填充是 5px

  • padding:10px;

  • 所有四个填充都是 10px

注意: 负值是不允许的。

默认值:0
继承:no
版本:CSS1
JavaScript 语法:object.style.padding="10px 5px"

浏览器支持

表格中的数字表示支持该属性的第一个浏览器版本号。

属性
padding1.04.01.01.03.5

属性值

说明
length规定以具体单位计的填充值,比如像素、厘米等。默认值是 0px
%规定基于父元素的宽度的百分比的填充
inherit指定应该从父元素继承padding

如您还有不明白的可以在下面与我留言或是与我探讨QQ群308855039,我们一起飞!

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


Padding(填充)

当元素的 Padding(填充)(内边距)被清除时,所"释放"的区域将会受到元素背景颜色的填充。

单独使用填充属性可以改变上下左右的填充。缩写填充属性也可以使用,一旦改变一切都改变。

可能的值

说明
length定义一个固定的填充(像素, pt, em,等)
%使用百分比值定义一个填充

填充- 单边内边距属性

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

实例

padding-top:25px;

padding-bottom:25px;

padding-right:50px;

padding-left:50px;


填充 - 简写属性

为了缩短代码,它可以在一个属性中指定的所有填充属性。

这就是所谓的缩写属性。所有的填充属性的缩写属性是"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填充属性

属性说明
padding使用缩写属性设置在一个声明中的所有填充属性
padding-bottom设置元素的底部填充
padding-left设置元素的左部填充
padding-right设置元素的右部填充
padding-top设置元素的顶部填充

如您还有不明白的可以在下面与我留言或是与我探讨QQ群308855039,我们一起飞!


个网页前端是由HTML DOM与嵌套组合形成视图结加上 CSS 样式的修饰形成视图,由JavaScript 接受用户的交互请求,以事件机制来响应用户交互操作而形成的。CSS是前台页面形式最重要的部分,它负责控制DOM元素的页面布局和颜色、大小的属性。

在CSS中有一著名的盒子模型理论,可以用它来控制DOM的位置。基于div+css技术的“盒子模型”的出现大大代替了传统的table表格嵌套。

虽然其十分好用,但是对于很多新手来说,却很难搞清楚它几个属性和内容之间的联系个区别。

盒子模型概念

所有页面的元素都可以看做一个盒子,占据着一定的页面空间。一般来说这些被占据的空间往往会比单纯的内容要大。因此,可以通过盒子的边框和距离等参数来控制内容的位置。

Div+CSS 盒子模型

说明:

1、Margin:中文叫外边距,主要作用是控制边框外(Border以外)的区域,外边距是透明的

2、Border:中文叫边框,是围绕在内边距(Padding)和内容外的边框。注意,它不是透明的

3、Padding:中文叫内边距,控制内容周围的区域,内边距是透明的

4、Content:内容,盒子的内容,显示文本和图像。

5、在Css文件中设置的Div的Css.width和Css. height就是内容的宽和高。

6、盒子实际尺寸有可能大于内容尺寸:

盒子模型的总宽度等于content(宽)+padding(左右)+border(左右)+margin(左右);

盒子模型的总高度等于content(高)+padding(上下)+border(上下)+margin(上下);

实例演示--原始样式

接下来通过实例演示的方式来一一讲解Margin、Border、Padding的作用和区别。

页面如图所示:


原始样式

代码:

HTML:
<body>
    <div class="TsetUpper"></div>
    <div class="TsetMiddle"></div>
    <div class="TsetDown"></div>
</body>
CSS:
.TsetUpper{
	width: 400px;
	height: 200px;
	background-color: black;
	position: relative;
	margin: auto;
	text-align: center;
}
.TsetMiddle{
	width: 600px;
	height: 200px;
	background-color: red;
	position: relative;
	margin: auto;
}
.TsetDown{
	width: 400px;
	height: 200px;
	background-color: black;
	position: relative;
	margin: auto;
	text-align: center;
}

Border

元素边框:我们可以在CSS边框属性中设置元素边框的样式和颜色。

按如下代码设置Div(TsetMiddle)的Border(边框):

border-style:solid;
border-width: 10px;
border-color: aqua;

刷新页面如下图:此时TsetMiddle这个盒子的总宽度已经变成200+30+30了,而且可以设置其底色和线条样式。

Border

Margin

margin 控制周围的元素区域。margin 没有背景颜色,是完全透明的。通过margin可以控制元素与四周元素的空隙距离;

按如下代码设置Div(TsetMiddle)的margin(外边距):

margin: 30px auto;

刷新页面如下图:此时TsetMiddle这个盒子的总宽度已经变成200+30(Border)+30(Margin)+30(Border)+30(Margin)了。

Margin

Padding

Padding:当元素的 padding(填充)内边距被清除时,所释放的区域将会受到元素背景颜色的填充。

按如下代码设置Div(TsetMiddle)的margin(外边距):

padding: 30px;

刷新页面如下图:此时TsetMiddle这个盒子的总宽度已经变成200+30(Padding)+30(Border)+30(Margin)+30(Padding)+30(Border)+30(Margin)了。

Padding

总结

1、各属性的值可以用px为单位,也可以用em,百分比等。

2、可以利用盒子的各种属性,调整其内容在父容器中的位置。