[分享]css单元格边距设置

CSS单元格边距设置是指在表格中控制单元格与相邻单元格和表格边框之间的空隙大小，以达到更好的排版效果的技术。这在设计复杂表格布局时非常有用。table { bordercollapse: collap...

CSS单元格边距设置是指在表格中控制单元格与相邻单元格和表格边框之间的空隙大小，以达到更好的排版效果的技术。这在设计复杂表格布局时非常有用。

table {
   border-collapse: collapse;
}
td, th {
   padding: 10px; /* 设置内边距，即单元格内容与边框之间的空间大小 */
   border: 1px solid black; /* 设置单元格边框 */
   text-align: center; /* 文字居中对齐 */
} 

以上代码中，设置了表格边框的合并方式为collapse，即将相邻边框合并成一个边框。内边距padding可以控制单元格内部内容与边框之间的距离，可以根据需求调整大小。边框border属性设置了单元格的边框大小和颜色，可以根据需求选择调整。

此外，还可以使用CSS中的border-spacing属性控制单元格边缘之间的空隙大小。

table {
   border-collapse: separate;
   border-spacing: 10px; /* 设置单元格边距 */
} 

以上代码中，将表格边框合并方式设置为separate，即让相邻边框之间保留一定的距离，而不是合并成一个。使用border-spacing属性可以控制单元格之间的距离，可以根据需求调整大小。

总之，通过在CSS中设置单元格内边距和外边距，可以控制单元格之间的距离大小，让表格呈现出更加美观、整洁的效果。