内边距 – padding

预计阅读时间1 分 106 views

1 作用

内边距用于在元素的内容和边框之间创建空白间隔，从而调整元素的内部布局。通过设置内边距，可以控制元素内容与边框之间的距离，使页面布局更加灵活。

2 语法

内边距的语法包括四个属性：padding-top、padding-right、padding-bottom 和 padding-left，分别用于设置元素的上、右、下、左方向的内边距。也可以使用简写形式 padding 来统一设置四个方向的内边距。

selector {
    padding-top: 10px; /* 设置上内边距为10像素 */
    padding-right: 20px; /* 设置右内边距为20像素 */
    padding-bottom: 10px; /* 设置下内边距为10像素 */
    padding-left: 20px; /* 设置左内边距为20像素 */
    /* 或者使用简写形式 */
    padding: 10px 20px; /* 上下内边距为10像素，左右内边距为20像素 */
}

3 示例

下面是一个简单的 HTML 示例，展示了如何在元素上应用内边距。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS Padding Example</title>
    <style>
        .box {
            width: 200px;
            height: 100px;
            background-color: #f0f0f0;
            /* 设置元素内边距 */
            padding: 20px; /* 四个方向的内边距均为20像素 */
        }
    </style>
</head>
<body>
    <div class="box">
        <h2>示例元素</h2>
        <p>这是一个示例元素，通过CSS样式设置了内边距。</p>
    </div>
</body>
</html>

在这个示例中，一个具有类名为 box 的 <div> 元素被创建，并且通过 CSS 样式设置了它的内边距为 20px。

内边距 – padding

1 作用

2 语法

3 示例

Leave a Comment 取消回复

内边距 – padding

内容