margin
使我们使用得很频繁的一个属性,用来设置一个元素所有外边距的宽度,或者设置各边上外边距的宽度,可以有 1 到 4 个值。例子:margin:10px 5px 15px 20px;
说明:
属性值 | 描述 |
---|---|
auto | 浏览器计算外边距 |
length | 规定以具体单位计的外边距值,比如像素、厘米等。默认值是 0px |
% | 规定基于父元素的宽度 的百分比的外边距 |
inherit | 规定应该从父元素继承外边距 |
值得注意的是属性值为百分比时的边距是基于父元素的宽度
来计算的,有如下两个DIV:
依照属性描述,得出的上、右、下、左边距都是400x10%=40px,结果也是如此:
想象中margin-top和margin-bottom应该与包含元素的高度关联,而margin-left和margin-right才应该与包含元素的宽度关联。经查阅,这与页面默认的书写模式writing-mode
有关。默认情况下writing-mode
的值为 horizontal-tb
,即水平书写方式。当把书写模式修改为纵向的时候,margin-top/bottom/left/right的百分比值都将会以包含元素的高度为参照,即200x10% = 20px。
造成这种现象的原因其实更多的要从css的设计意图上去想,因为css的基础需求是排版,而我们通常所见的横排文字,它的水平宽度一定(实际写页面时,如果没有定义元素宽度或者强制一行显示,文字都会在遇到边界时换行,而不是水平延展),而垂直方向可以无限延展。但在将书写模式修改为纵向的时候,其参照就变成了高度而不再是宽度了。
writing-mode
:属性定义了文本在水平或垂直方向上如何排布。
writing-mode
: horizontal-tb | vertical-rl | vertical-lr | sideways-rl | sideways-lr
- horizontal-tb:水平方向自上而下的书写方式。即 left-right-top-bottom
- vertical-rl:垂直方向自右而左的书写方式。即 top-bottom-right-left
- vertical-lr:垂直方向内内容从上到下,水平方向从左到右
- sideways-rl:内容垂直方向从上到下排列
- sideways-lr:内容垂直方向从下到上排列
演示效果:
兼容性: