浏览器定义的相关的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