css之padding

1.padding影响元素尺寸:
对于block元素:
- box-sizing:border-box;padding值大于宽度值,会影响元素宽度
- width非auto,padding值会影响元素宽度
- box-sizing:border-box;同时padding值没有大于宽度值或者width:auto,padding值不会影响元素宽度
对于inline元素:
水平padding影响尺寸,垂直padding不影响尺寸,但影响背景色(占据空间),也会影响边框
2.应用–分隔线
法1:用字符|,局限:会跟着字体的大小改变高度,跟字体一样高,不符合审美
法2:inline-block,要设置高度宽度和对齐
法3:用inline和padding,通过控制padding来对齐

注册<span></span>登录
span{
   border-left: 2px solid;//控制线的宽
   padding:2px 6px 1px;//左右内边距控制距离右边元素12px,上下内边距控制线的高度
   margin-left:12px //距离左边元素12px
}

3.padding负值和百分比值
padding不支持负值。
块级元素:padding的百分比是相对父元素的宽度计算。

#wrap{
   width: 100px;
    height: 200px;
}
#inner{
    padding:50%;//边长100px正方形
    background-color: red;
}
<div id="wrap">
    <div id="inner">

    </div>
</div>

应用–移动端制作正方形方块

<div class="container"></div>
.container{
    padding:50%;//宽与屏幕的宽相同
}

内联元素:padding会断行。

 #wrap{
    width: 100px;
}
span{
    padding:50%;
    background-color: red;
}
<div id="wrap">
   <span>sdddddddddddds啦啦啦啦啦啦绿dddddddd</span>        
</div>

这里写图片描述

空的inline元素,padding相同,但是高宽不相等,要设置font-size为0,高宽才相等。因为inline元素的垂直padding会让空白节点显现。

<div id="wrap">
    <span></span>        
</div>
#wrap{
    padding: 100px;
    width: 100px;
}
span{
    padding:50%;
    background-color: red;
    font-size: 0;
}

这里写图片描述
如果去掉font-size:0,不是正方形,span元素中有空白节点,默认浏览器字体16px
这里写图片描述
4.css标签元素的内置padding
ol/ul列表
内置padding-left单位是px,而不是em;
chrome浏览器是40px;
所以字号很小时,间距会很开;
所以字号很大时,序号可能跑到容器外面。
所以一般网页字体为14px,设置padding-left为22比较好。(推荐)

所有浏览器input/textarea有内置padding
所有浏览器button有内置padding
部分浏览器select有内置padding,火狐、IE8+可以设置padding
所有浏览器radio、checkbox无内置padding,不能设置padding
button的padding很难控制:
chrome浏览器下设置button的padding:0,正常
Firefox浏览器下设置button的padding:0,左右仍然还有间距,要使用button::-moz-focus-inner{padding:0;}
IE浏览器的IE7下,文字越多,左右间距越大,设置button{overflow:hidden;}就能使间距为0
button的padding与高度计算不兼容:

button{
    line-height:20px;
    padding:10px;
    border:none;
}
chrome 40px
IE7  45px
IE8+  40px
FF  42px

button的padding兼容性差,所以一般用a标签模拟按钮。
如果是要用表单提交按钮,可以用label标签来模拟按钮,这样能保留按钮的默认提交行为。

#submit-btn{
   position: absolute;
   left: -2000px;
}
label{
    display:inline-block;
    line-height: 20px;
    padding: 10px;
}
<label for="submit-btn">提交</label>
<input type="submit" id="submit-btn" value="提交">

使input元素可访问性隐藏,即不能使它overflow:hidden或者display:none,而是设置它处于屏幕外或者隐藏在背景后面,这样,在所有浏览器下按钮的高度都为40px。

<form action="www.baidu.com">
    <label for="submit-btn">提交</label>
    <input type="submit" id="submit-btn" value="提交">
</form>
form{
    background-color: red;
}
#submit-btn{
    position: relative;
    z-index: -1;//z-index为负值,可以使该元素隐藏到背景色后面
}
label{
    display:inline-block;
    line-height: 20px;
    padding: 10px;
}

5.padding与图形绘制
一个div制作一个菜单图标

 .list{
    width: 70px;
    height: 10px;
    border-bottom: 10px solid;//模拟第一道杠
    border-top: 10px solid;//模拟第三道杠
    background-color: currentColor;//当前的标签所继承的文字颜色
    background-clip:content-box;//模拟第二道杠
    padding: 10px 0;
}

这里写图片描述

.list{
    width: 70px;
    height: 70px;
    background-color: currentColor;
    background-clip:content-box;
    padding: 10px;
    border-radius:50%;
    border:10px solid;
}

这里写图片描述
6.padding实现两栏自适应布局

.left{
    width: 120px;
    height: 100px;
    background-color: red;
    float: left;
    margin-left: -120px;
}
.box{
    padding-left: 120px;
}
<div class="box">
    <div class="left"></div>
    我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字
</div>

这里写图片描述

//或者
.left{
    width: 120px;
    height: 70px;
    background-color: red;
    float: left;
}
.right{
    padding-left: 120px;
}
<div class="box">
    <div class="left"></div>
    <div class="right">
    我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字
    </div>
</div>
### CSS Padding 的使用方法及示例 #### 基本概念 CSS `padding` 是一个简写属性,用于定义元素边框与内容之间的空间。它允许开发者一次性设置上、右、下、左四个方向的内边距[^1]。 #### 单独设置各方向的 padding 可以通过单独的小属性来分别设置各个方向的内边距: - `padding-top`: 设置顶部内边距。 - `padding-right`: 设置右侧内边距。 - `padding-bottom`: 设置底部内边距。 - `padding-left`: 设置左侧内边距。 例如,下面的代码设置了不同的内边距值: ```css div { padding-top: 30px; padding-right: 20px; padding-bottom: 40px; padding-left: 100px; } ``` 上述代码表示该 `<div>` 元素在其内部四周留出了不同大小的空间[^2]。 #### 简写形式 为了简化代码,CSS 提供了 `padding` 的简写方式,可以一次声明多个方向上的内边距值。其书写顺序依次为 **上、右、下、左**(顺时针)。如果某些值省略,则会按照特定规则继承前一项的值: - 如果提供了一个值:适用于所有四个方向; - 如果提供了两个值:第一个值应用于上下,第二个值应用于左右; - 如果提供了三个值:第一个值应用于顶部,第二个值应用于左右,第三个值应用于底部; - 如果提供了四个值:则按顺序分别为上、右、下、左。 以下是几个例子: ```css /* 所有方向均为20px */ div { padding: 20px; } /* 上下为30px左右为50px */ div { padding: 30px 50px; } /* 上部为25px左右为50px,底部为75px */ div { padding: 25px 50px 75px; } /* 完整指定四边 */ div { padding: 10px 20px 30px 40px; } ``` 这些简写的语法能够显著减少冗余代码量并提高可读性[^3]。 #### 特定方向的独立控制 对于只需要调整单一方向的情况,也可以通过具体的方向属性实现更精确的操作。比如仅增顶部内边距而不影响其他三面时可用如下语句表达: ```css p { padding-top: 1em; /* 将段落文字距离上方边界扩大一倍行高单位长度 */ } ``` 这里展示了如何利用 `padding-top` 来改变单侧间距效果[^4]。 ### 总结 综上所述,无论是采用详细的分项设定还是紧凑型综合描述模式,在实际开发过程中合理运用 padding 可以为网页布局带来更灵活多样的表现形式。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值