[分享]css中怎么算内在边距

在CSS中，内在边距指的是一个元素内部内容与边框之间的距离。在不同的元素类型中，内在边距的计算方式是有所不同的。下面我们来逐个探究。/ 对于块级元素 / .box { paddingtop: 20px...

在CSS中，内在边距指的是一个元素内部内容与边框之间的距离。在不同的元素类型中，内在边距的计算方式是有所不同的。下面我们来逐个探究。

/* 对于块级元素 */
.box {
    padding-top: 20px;
    padding-right: 10px;
    padding-bottom: 30px;
    padding-left: 15px;
}

/* 对于表格元素 */
table {
    padding: 20px;
}

/* 对于行内元素 */
span {
    padding: 5px;
} 

首先是块级元素，这类元素通常有页面布局的作用，内在边距的计算有四个方向分别进行。以上代码就是例子，通过padding-top、padding-right等四个属性值来指定内部边距的大小。

对于表格元素，CSS也提供了一种便捷的写法，仅需一个padding属性就可以对表格内部所有单元格的内在边距进行赋值。以上代码就是个例子，通过在table元素身上声明padding属性即可。

行内元素的内在边距计算方式和块级元素略有不同，因为行内元素本身无法根据上下左右四个方向区分边距。所以在行内元素中，内在边距只需要声明一个padding属性即可。