html padding

作者：淡漠伤悲发布日期:2026-01-10 浏览:76

<!DOCTYPE html>
<html>
<head>
    <title>HTML Padding Example</title>
    <style>
        /* 使用 padding 属性为 div 元素添加内边距 */
        .padded-div {
            padding: 20px; /* 上下左右都设置为 20px 的内边距 */
            background-color: lightblue;
            border: 1px solid blue;
        }

        .custom-padding {
            padding-top: 10px;   /* 上边距为 10px */
            padding-right: 20px; /* 右边距为 20px */
            padding-bottom: 30px; /* 下边距为 30px */
            padding-left: 40px;   /* 左边距为 40px */
            background-color: lightcoral;
            border: 1px solid red;
        }
    </style>
</head>
<body>

    <h2>Padding 示例</h2>
    <div class="padded-div">
        这个 div 元素有 20px 的内边距。
    </div>

    <div class="custom-padding">
        这个 div 元素有自定义的内边距：上 10px，右 20px，下 30px，左 40px。
    </div>

</body>
</html>

解释说明

padding 属性:
- padding 是一个 CSS 属性，用于设置元素内容与边框之间的空间（内边距）。
- 在第一个 .padded-div 类中，我们使用了简写形式 padding: 20px;，这表示上下左右四个方向的内边距都设置为 20px。
自定义内边距:
- 在第二个 .custom-padding 类中，我们分别设置了上、右、下、左四个方向的内边距。每个方向的内边距可以单独设置不同的值，以实现更灵活的布局效果。
背景颜色和边框:
- 为了更好地展示内边距的效果，我们分别为两个 div 元素设置了背景颜色和边框。这样你可以清楚地看到内边距是如何影响元素内容与边框之间的空间的。

上一篇：html下拉列表标签

下一篇：html table 合并单元格