CSS 内行间距
单边填充属性
您还可以使用以下四个单独的属性设置顶部、右侧、底部和左侧内部间距:
正如您已经想到的,以下规则与前面的缩写规则达到了完全相同的效果:
h1 { padding-top: 10px; padding-right: 0.25em; padding-bottom: 2ex; padding-left: 20%; }
元素框最里面的部分是实际内容,直接包围内容的是内部间距。 内部间距呈现元素的背景。 行内间距的边缘是边框。 边框之外是外边距,默认情况下它是透明的css是内,因此不会遮挡其后面的任何元素。
提示:背景应用于由内容和内边距组成的区域。
衬里、边框和填充都是可选的,默认值为零。 此外,许多元素将具有由用户代理样式表设置的外部和内部间距。 可以通过将元素的边距和填充设置为零来覆盖此浏览器样式。 这可以单独完成css是内,也可以使用所有元素的通用选择器来完成:
*{边距:0;填充:0;}
在CSS中,宽度和高度是指内容区域的长度和高度。 减少内边距、边框和内边距不会影响内容区域的大小,并会减少元素框的整体大小。
假设盒子的每边都有 10 个像素的外部间距和 5 个像素的内部间距。 如果希望元素框为100像素,则需要将内容长度设置为70像素。 见右图:
#box{宽度:70px;边距:10px;填充:5px;}
提示:内边距、边框和内边距可以应用于元素的所有侧面或单个侧面。
提示:外部距离可以为负值,并且在许多情况下使用负外部距离。