元素内边距
指的是元素里的内容与边框之间的距离
属性:
padding-left: 左内边距
padding-right: 右内边距
padding-top: 上内边距
padding-bottom: 下内边距
padding: 上 右 下 左
示例 1 :
左内边距
属性:padding-left
值:数字
指的是,元素中的内容,与边框之间的距离
<style>
.red{
border:5px solid red;
background-color:green;
}
.pad-left{
border:5px solid red;
background-color:green;
padding-left:50px;
}
</style>
<span class="red"> 无内边距的span </span><br/> <br/>
<span class="pad-left"> 左边距为50的span </span><br/>
![](https://img.laitimes.com/img/9ZDMuAjOiMmIsIjOiQnIsISPrdEZwZ1Rh5WNXp1bwNjW1ZUba9VZwlHdsATOfd3bkFGazxCMx8VesATMfhHLlN3XnxCMwEzX0xiRGZkRGZ0Xy9GbvNGLpZTY1EmMZVDUSFTU4VFRR9Fd4VGdsYTMfVmepNHLrJXYtJXZ0F2dvwVZnFWbp1zczV2YvJHctM3cv1Ce-cmbw5iN5QzYmRDNyEWNyYTY5czNmRWN4EmNxImNxEjZjhjM28CX4AzLchDMxIDMy8CXn9Gbi9CXzV2Zh1WavwVbvNmLvR3YxUjL0M3Lc9CX6MHc0RHaiojIsJye.png)
示例 2 :
内边距,写1个和写4个的区别
属性:padding
值:如果只写一个,即四个方向的值
值:如果写四个,即四个方向的值
上 右 下 左,依顺时针的方向依次赋值
<style>
.pad-left-one{
border:5px solid red;
background-color:green;
padding: 20;
}
.pad-left-four{
border:5px solid red;
background-color:green;
padding: 10 20 30 40;
}
</style>
<br/>
<span class="pad-left-one"> padding:20的span </span> <br/> <br/> <br/> <br/>
<span class="pad-left-four">
padding: 10 20 30 40 的span </span> <br/> <br/> <br/> <br/>
当内边距的值少于4个的时候
如果缺少左内边距的值,则使用右内边距的值。
如果缺少下内边距的值,则使用上内边距的值。
如果缺少右内边距的值,则使用上内边距的值。
举例说明
这是完整4个的
padding: 10 20 40 80
如果只有3个
padding: 10 20 40
那么left取right
padding: 10 20 40 = padding: 10 20 40 20
如果只有两个
padding: 10 20
那么bottom取top,left取right
padding: 10 20 = padding:10 20 10 20
如果只有一个
padding:10
那么right取top,bottom取top,left取top
padding:10 = padding:10 10 10 10