HTML元素内部边距
2325字,阅读需时8分钟
来自专栏
课程/专栏

元素内部边距是指元素内容与元素四边边框之间的距离,内部边距的作用是让元素的内容在元素四周留有空白。内部边距使用标签padding,padding的属性值为数值或百分比。属性值为百分比时,其实际数值是相对于父元素宽度计算的,当父元素宽度发生变化时,padding的属性值也会发生变化。padding的属性值有1至4个,其使用方法如下所示。

padding给出1个属性值时,元素的上内边距、右内边距、下内边距、左内边距都被定义为同一个值。下面的样式语句定义了元素上内边距是10px,右内边距是10px、下内边距是10px、左内边距是10px。

.p_style
{
   padding:10px;
}

padding给出2个属性值时,元素的上下内边距被定义为同一个值,元素的左右内边距被定义为同一个值。下面的样式语句定义了元素上下内边距是15px、左右内边距是10px。

.p_style
{
   padding:15px 10px;
}

padding给出3个属性值时,元素的左右内边距被定义为同一个值。下面的样式语句定义了元素上内边距是15px、左右内边距是5px、下内边距是10px。

.p_style
{
   padding:15px 5px 10px;
}

padding给出4个属性值时,元素的上、右、下、左内边距分别被定义为不同的值。下面的样式语句定义了元素上内边距是10px、右内边距是5px、下内边距是15px、左内边距是20px。

.p_style
{
   padding:10px 5px 15px 20px;
}

下面的HTML文档展示了padding的使用方法。

<html>
<head>
<title>border-style样式</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
   .p1{border-style:solid; padding:10px;}
   .p2{border-style:dashed;padding:15px 10px;}
   .p3{border-style:dotted;padding:15px 5px 10px;}
   .p4{border-style:double;padding:10px 5px 15px 20px;}
</style>
</head>
<body>
<p>上、右、下、左内边距为10px</p>
<p>上下内边距为15px,左右内边距为10px</p>
<p>上内边距15px,左右内边距5px,下内边距为10px</p>
<p>上内边距为10px,右内边距为5px,下内边距为15px,左内边距为20px</p>
</body>
</html>

在上面的网页代码中,分别定义了p1(padding有1个值)、p2(padding有2个值)、p3(padding有3个值)、p4(padding有4个值)四个样式,这四个样式分别应用于p元素。浏览器显示效果如下图所示。

 image.png

单独设置上、右、下、左内边距

前面介绍的padding样式标签对元素的上、右、下、左内边距都会产生作用。另外,CSS提供了样式标签padding-top(设置上内边距)、padding-right(设置右内边距、padding-bottom(设置下内边距)、padding-left(设置左内边距),用于分别设置HTML元素上、右、下、左的内边距。下面的HTML文档展示了样式标签的使用方法。

<html>
<head>
<title>border-style样式</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
   .ptop{border-style:solid; padding-top:20px;}
   .pright{border-style:dashed;padding-right:20px;}
   .pbottom{border-style:dotted;padding-bottom:20px;}
   .pleft{border-style:double;padding-left:20px;}
</style>
</head>
<body>
<p>上内边距为20px</p>
<p>右内边距为20px</p>
<p>下内边距为20px</p>
<p>左内边距为20px</p>
</body>
</html>

浏览器显示效果如下图所示。

image.png

 

 

 

 

 

 

我要评论
全部评论
郎宏林
授课老师
授课老师简介
项目经理,系统分析和架构师,从事多年中文信息处理技术。熟悉项目管理、擅长项目需求分析和设计、精通Java、C#、Python等编程语言。
下载APP

手机、电脑同步学

用微信或手机浏览器扫描二维码,即可下载APP。

  • 备案号:鲁ICP备15001146号
  • @1997-2018 潍坊米粒花网络技术有限公司版权所有