1. CSS 基础

  2. 取值单位

  3. 外观样式

  4. 布局样式

  5. 动画样式

  6. 工具与规范

  7. 实例练习

padding 属性用以设置元素的内边距,有以下取值:

  • 长度
  • 百分比:针对父元素宽度的百分比。

$$warning

对于行内元素,上下内边距不占据页面空间。

$$

$$tip

paddingmargin 的区别:

  • padding 填充了元素的内容区域,可以增大背景色的范围,也可触发事件。
  • margin 用来控制元素之间的距离。

$$

当设置值的数量不同时,应用的效果也不同:

/* 设置所有边距 */
padding: 10px;
/* 设置上下边距为 10px,左右边距为 20px */
padding: 10px 20px;
/* 设置上边距为 10px,左右边距为 20px,下边距为 30px (不推荐)*/
padding: 10px 20px 30px;
/* 设置上边距为 10px,右边距为 20px, 下边距为 30px,左边距为 40px */
padding: 10px 20px 30px 40px;

也可以单个边距设置值:

/* 设置上边距 */
padding-top: 10px;
/* 设置下边距 */
padding-bottom: 10px;
/* 设置左边距 */
padding-left: 10px;
/* 设置右边距 */
padding-right: 10px;

<iframe height="300" style="width: 100%" scrolling="no" title="演示" src="https://codepen.io/3yya/embed/WNXYxRJ?default-tab=css%2Cresult&editable=true&theme-id=light" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true"></iframe>


练习

  1. 完善以下代码达到实例的效果。
<button>管理</button>
<button>编辑</button>
<button>删除</button>

$$demo

<button class="btn manage">管理</button>

<button class="btn edit">编辑</button>

<button class="btn delete">删除</button>

<style>

.btn {

padding: 5px 20px;

color: white;

font-weight: bold;

}

.manage {

background-color: #409eff;

}

.edit {

background-color: #67c23a;

}

.delete {

background-color: #f56c6c;

}

</style>

$$