CSS | margin-block-start 属性

CSS中的margin-block-start属性用于设置元素的垂直方向的外边距的起点位置。在LTR（从左到右）的文本方向中，它对应于元素的上边缘；在RTL（从右到左）的文本方向中，它对应于元素的右边缘。

语法

margin-block-start: length | percentage | auto | inherit;

取值

• length：指定一个绝对长度值，如px、mm等；
• percentage：指定相对于父元素宽度的百分比值；
• auto：自动计算外边距值；
• inherit：规定应该从父元素继承margin-block-start属性的值。

实例

例1：设定垂直方向上的外边距的起点位置

div {
  margin-block-start: 20px; /* 设置垂直方向外边距的起点位置为 20px */
}

例2：百分比值控制外边距时使用

div {
  margin-block-start: 10%; /* 把元素上边缘的外边距设为元素父元素宽度的 10% */
}

浏览器兼容性

总结

• margin-block-start用于设置元素的垂直方向的外边距的起点位置；
• 取值：length、percentage、auto、inherit；
• 使用百分比值控制外边距时需要注意父元素的宽度是否已经确定；
• 兼容性：IE不支持，Chrome、Firefox、Safari等其他主流浏览器均可使用。