|
|
|
|
示例 2 : 内边距，写1个和写4个的区别 示例 3 : 当内边距的值少于4个的时候
属性: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/>
<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/>
属性：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/>
<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个的 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
HOW2J公众号，关注后实时获知最新的教程和优惠活动，谢谢。
提问已经提交成功，正在审核。 请于 我的提问 处查看提问记录，谢谢
|