浏览器定义的相关的margin属性

在查看浏览器自定义属性时,发现有:margin-block-start: 1em;
margin-block-end: 1em;时,当时一想,这是什么东西,
在这里插入图片描述
在页面起什么效果呢?
然后看到其单位是em,是个相对单位,那这是相对谁取值呢,再往上看,就看到一个font-size: 1.17em; 那它是相对font-size进行取值吗?

而font-size根据其父元素(在这里,也就是根元素,即html元素),而html元素的font-size: 16px,通过计算,可以得到h3的font-size: 18.72px,那么margin-block-start的值是相对于父元素进行取值(16px),还是相对于自身的font-size进行取值呢(18.72px)

再次通过盒模型对比,可以看出,margin-block-start,margin-block-end是根据自身的font-size进行取值。
在这里插入图片描述
此时再想,如果将margin-block-start的值换成百分值会怎么样呢?

h3 {
	margin-block-start: 10%;
}

在这里插入图片描述
通过上图可以清楚地发现,margin取值为百分比时,margin相对于自身的宽度进行计算的。

同时margin的对应关系 :
margin-block-start == margin-top
margin-block-end == margin-bottom
margin-inline-start == margin-left
margin-inline-end == margin-right

猜你喜欢

转载自blog.csdn.net/qq_29055201/article/details/86704759