|
|
|
|
示例 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公众号，关注后实时获知最新的教程和优惠活动，谢谢。
问答区域
2021-01-13
不显示内边距
回答已经提交成功，正在审核。 请于 我的回答 处查看回答记录，谢谢
2020-10-01
<br/>
3 个答案
福清平头哥 跳转到问题位置 答案时间：2022-09-26 br标签是换行的意思
奔放 跳转到问题位置 答案时间：2020-10-24 在这里可能是为了防止元素重叠
奔放 跳转到问题位置 答案时间：2020-10-23 那是换行
回答已经提交成功，正在审核。 请于 我的回答 处查看回答记录，谢谢
2020-04-26
疑问,为什么缺少右边的值,要用上的值而不用左边对称的值
2018-11-21
关于最后一例，有个疑问
2017-04-28
padding:里面输入的数值后面一定要带px
提问太多，页面渲染太慢，为了加快渲染速度，本页最多只显示几条提问。还有 1 条以前的提问，请 点击查看
提问之前请登陆
提问已经提交成功，正在审核。 请于 我的提问 处查看提问记录，谢谢
|
