html中padding用法

作者：铁打的心，也会穿孔，发布日期:2025-07-31 浏览:62

<!DOCTYPE html>
<html>
<head>
    <title>Padding 示例</title>
    <style>
        /* 定义一个类，设置 padding */
        .padded-box {
            width: 200px;
            height: 100px;
            background-color: lightblue;
            padding: 20px; /* 设置所有边的内边距为 20px */
            border: 1px solid black;
        }

        /* 不同方向的 padding 设置 */
        .custom-padding {
            width: 200px;
            height: 100px;
            background-color: lightgreen;
            padding-top: 10px;   /* 上边内边距为 10px */
            padding-right: 20px; /* 右边内边距为 20px */
            padding-bottom: 30px; /* 下边内边距为 30px */
            padding-left: 40px;   /* 左边内边距为 40px */
            border: 1px solid black;
        }
    </style>
</head>
<body>
    <div class="padded-box">
        这是一个有 padding 的盒子。
    </div>

    <div class="custom-padding">
        这是一个有不同方向 padding 的盒子。
    </div>
</body>
</html>

解释说明：

padding 属性用于设置元素内容与边框之间的空间（即内边距）。它可以应用于所有四个方向（上、右、下、左）。
在第一个 .padded-box 示例中，padding: 20px; 表示四边的内边距都为 20px。
在第二个 .custom-padding 示例中，分别设置了不同的上下左右内边距，展示了如何单独控制每个方向的内边距。

上一篇：html 引入css

下一篇：html5新增标签