（三）盒子模型之内边距padding

最新推荐文章于 2024-09-24 09:17:03 发布

倔强的小白菜

最新推荐文章于 2024-09-24 09:17:03 发布

阅读量722

点赞数

分类专栏：前端基础文章标签： css html html5

本文链接：https://blog.csdn.net/weixin_47481102/article/details/124593769

版权

本文介绍了CSS中的padding属性，用于设置元素内容与边框之间的内边距。padding可以影响盒子的实际大小，当指定内边距后，需要通过调整width和height来保持盒子尺寸的一致性。此外，未指定width/height的盒子，padding不会改变其大小。通过实例练习加深了对padding的理解。

摘要由CSDN通过智能技术生成

padding属性用于设置内边距，级边框与内容之间的距离。单位是px。

属性	作用
padding-left	左内边距
padding-right	有内边距
padding-top	上内边距
padding-bottom	下内边距

练习

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>盒子模型内边距</title>
    <style>
      div {
        height: 200px;
        width: 200px;
        background-color: pink;
        /* 所有内边框设置为10像素 */
        /* padding: 10px; */
        /* 内边框左 */
        /* padding-left: 10px; */
        /* 内边框上 */
        /* padding-top: 20px; */
        /* 内边框右 */
        /* padding-right: 20px; */
        /* 内边框下 */
        padding-bottom: 20px;
      }
    </style>
  </head>
  <body>
    <div>盒子模型内容为content，盒子边框为border，盒子内边距为padding</div>
  </body>
</html>

padding属性（简写属性）可以有一到四个值。

值得个数

表达意思