CSS 内边距

4. 导航和菜单

.nav-item {
    padding: 12px 20px;
    color: #333;
    text-decoration: none;
    transition: background-color 0.3s;
}

.nav-item:hover {
    background-color: #f8f9fa;        /* 悬停背景色会填充内边距区域 */
}

.dropdown-menu {
    padding: 8px 0;                   /* 上下8px，左右0 */
}

.dropdown-item {
    padding: 8px 16px;
    display: block;
}

5. 创建一致的间距系统

/* 使用CSS变量定义内边距系统 */
:root {
    --space-xs: 0.5rem;
    --space-sm: 1rem;
    --space-md: 1.5rem;
    --space-lg: 2rem;
    --space-xl: 3rem;
}

.p-xs { padding: var(--space-xs); }
.p-sm { padding: var(--space-sm); }
.p-md { padding: var(--space-md); }
.p-lg { padding: var(--space-lg); }

.pt-sm { padding-top: var(--space-sm); }
.pr-md { padding-right: var(--space-md); }
.pb-lg { padding-bottom: var(--space-lg); }
.pl-sm { padding-left: var(--space-sm); }

.px-md { padding-left: var(--space-md); padding-right: var(--space-md); }
.py-lg { padding-top: var(--space-lg); padding-bottom: var(--space-lg); }

内边距与盒子模型

标准盒子模型

.box-standard {
    box-sizing: content-box; /* 默认值 */
    width: 300px;
    padding: 20px;
    border: 5px solid #333;
}
/* 总宽度 = 300 + 20×2 + 5×2 = 350px */

怪异盒子模型（推荐）

.box-border {
    box-sizing: border-box; /* 内边距和边框包含在width内 */
    width: 300px;
    padding: 20px;
    border: 5px solid #333;
}
/* 总宽度 = 300px (内容区 = 300 - 20×2 - 5×2 = 250px) */

响应式内边距

.container {
    padding: 1rem;
}

/* 平板 */
@media (min-width: 768px) {
    .container {
        padding: 1.5rem 2rem;
    }
}

/* 桌面 */
@media (min-width: 1024px) {
    .container {
        padding: 2rem 3rem;
        max-width: 1200px;
        margin: 0 auto;
    }
}

/* 使用clamp()实现流畅的内边距 */
.fluid-container {
    padding: clamp(1rem, 5vw, 3rem); /* 最小1rem，首选5vw，最大3rem */
}

高级技巧

1. 使用内边距实现宽高比

.aspect-ratio-16-9 {
    width: 100%;
    padding-top: 56.25%; /* 9 ÷ 16 = 0.5625 */
    position: relative;
}

.aspect-ratio-16-9 > .content {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

2. 创建圆形元素

.avatar {
    width: 100px;
    height: 100px;
    padding: 5px; /* 内边距作为"相框" */
    border: 3px solid #3498db;
    border-radius: 50%;
    background-color: white;
}

.avatar img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
}

3. 悬停效果增强

.icon-button {
    padding: 8px;
    border-radius: 50%;
    transition: padding 0.2s ease;
}

.icon-button:hover {
    padding: 10px; /* 悬停时略微增加内边距 */
    background-color: #f0f0f0;
}

4. 使用逻辑属性（支持多语言）

/* 物理属性 */
.physical {
    padding-top: 10px;
    padding-right: 20px;
    padding-bottom: 30px;
    padding-left: 40px;
}

/* 逻辑属性（根据书写模式自动适应）*/
.logical {
    padding-block-start: 10px;    /* 块级起始方向 */
    padding-inline-end: 20px;     /* 行内结束方向 */
    padding-block-end: 30px;      /* 块级结束方向 */
    padding-inline-start: 40px;   /* 行内起始方向 */
}

常见问题与解决方案

问题1：内联元素的垂直内边距

/* 内联元素的垂直内边距不会影响行高计算 */
span {
    padding-top: 20px;    /* 可能与其他元素重叠 */
    padding-bottom: 20px; /* 可能与其他元素重叠 */
}

/* 解决方案：改为inline-block */
span {
    display: inline-block;
    padding: 20px 10px;   /* 现在垂直内边距正常工作了 */
}

ps: 不建议使用 inline-block元素，会出现异响不到的布局

问题2：表格单元格的内边距

td, th {
    padding: 12px 16px;   /* 为表格单元格提供舒适的间距 */
    text-align: left;
    border-bottom: 1px solid #eee;
}

问题3：列表项的内边距

ul {
    padding-left: 0;      /* 移除默认的左内边距 */
    list-style: none;
}

li {
    padding: 8px 0;       /* 只为列表项设置垂直内边距 */
    border-bottom: 1px solid #f0f0f0;
}