如何使用CSS设置表格与列表间距_border-spacing padding技巧

table {
    border-collapse: separate; /* 确保边框是分离的 */
    border-spacing: 10px 15px; /* 水平10px，垂直15px */
    /* 或者只设置一个值，水平垂直都一样：border-spacing: 10px; */
}

td, th {
    padding: 8px 12px; /* 上下8px，左右12px */
}

ul, ol {
    padding-left: 20px; /* 默认通常会有个padding，这里可以调整 */
}
li {
    padding: 5px 0; /* 让列表项内容上下有点空间 */
}

li {
    margin-bottom: 10px; /* 让每个列表项下面留出10px的空间 */
}
/* 如果是水平列表，可能会这样用：*/
ul.horizontal-list li {
    display: inline-block;
    margin-right: 15px;
}

ul li {
    margin-bottom: 10px; /* 在每个列表项下方增加10px的间距 */
}

/* 如果不想让最后一个列表项下方也有间距，可以这样处理：*/
ul li:last-child {
    margin-bottom: 0;
}

ul li {
    padding: 8px 0; /* 列表项内部上下8px的内边距 */
    margin-bottom: 5px; /* 列表项之间5px的外边距 */
}

ul.horizontal-list {
    list-style: none; /* 通常会移除列表默认样式 */
    padding: 0;
    margin: 0;
}
ul.horizontal-list li {
    display: inline-block; /* 让列表项水平排列 */
    margin-right: 15px; /* 在每个列表项右侧增加15px的间距 */
}
ul.horizontal-list li:last-child {
    margin-right: 0; /* 移除最后一个列表项的右侧间距 */
}

ul.flex-list {
    display: flex; /* 开启Flexbox布局 */
    list-style: none;
    padding: 0;
    margin: 0;
    /* 可以选择使用gap属性来设置间距，现代浏览器支持良好 */
    gap: 20px; /* 列表项之间20px的间距，无需处理last-child */
}
/* 如果不支持gap，或者需要更细致的控制，仍然可以用margin */
/* ul.flex-list li {
    margin-right: 20px;
}
ul.flex-list li:last-child {
    margin-right: 0;
} */

ul.grid-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)); /* 示例：响应式列 */
    gap: 15px; /* 行和列之间的间距 */
    list-style: none;
    padding: 0;
    margin: 0;
}

td, th {
    padding: 0.8em 1.2em; /* 基于当前字体大小的内边距 */
}
ul li {
    margin-bottom: 1rem; /* 基于根元素字体大小的外边距 */
}

/* 桌面端默认间距 */
td, th { padding: 15px 20px; }
ul li { margin-bottom: 15px; }

@media (max-width: 768px) { /* 平板及以下 */
    td, th { padding: 8px 12px; } /* 缩小表格内边距 */
    ul li { margin-bottom: 10px; } /* 缩小列表项间距 */
}

@media (max-width: 480px) { /* 手机端 */
    td, th { padding: 5px 8px; } /* 进一步缩小 */
    ul li { margin-bottom: 8px; }
}

.table-responsive {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch; /* iOS流畅滚动 */
}
table {
    width: 100%; /* 确保表格在容器内尽可能宽 */
    min-width: 600px; /* 或者根据内容设定最小宽度 */
    border-collapse: collapse;
}

/* 示例：将表格行转换为块级元素 */
@media (max-width: 600px) {
    table, thead, tbody, th, td, tr {
        display: block;
    }
    thead tr {
        position: absolute;
        top: -9999px; /* 隐藏表头 */
        left: -9999px;
    }
    tr { border: 1px solid #ccc; margin-bottom: 10px; }
    td {
        border: none;
        border-bottom: 1px solid #eee;
        position: relative;
        padding-left: 50%; /* 为伪元素留出空间 */
        text-align: right;
    }
    td:before { /* 添加伪元素显示列名 */
        content: attr(data-label);
        position: absolute;
        left: 6px;
        width: 45%;
        padding-right: 10px;
        white-space: nowrap;
        text-align: left;
        font-weight: bold;
    }
}

ul.responsive-list {
    display: flex;
    flex-wrap: wrap; /* 允许换行 */
    gap: 15px; /* 所有子元素之间统一的间距 */
    padding: 0;
    list-style: none;
}

/* 或者对于更复杂的网格 */
.responsive-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 20px 15px; /* 行间距20px，列间距15px */
}