writing-mode与inline/block、start/end实例页面

展示

去论坛 »

//zxx: 已设置writing-mode: vertical-rl

1. margin-left ↔ margin-block-end

2. margin-top ↔ margin-inline-start

3. margin-right ↔ margin-block-start

4. margin-bottom ↔ margin-inline-end

代码

HTML：

<h4>1. margin-left    ↔  margin-block-end</h4>
<div class="item">
    <img src="./1.jpg" style="margin-left: 1rem;">
    <img src="./1.jpg" style="margin-block-end: 1rem;">
</div>
<h4>2. margin-top    ↔  margin-inline-start</h4>
<div class="item">
    <img src="./1.jpg" style="margin-top: 1rem;">
    <img src="./1.jpg" style="margin-inline-start: 1rem;">
</div>
<h4>3. margin-right    ↔  margin-block-start</h4>
<div class="item">
    <img src="./1.jpg" style="margin-right: 1rem;">
    <img src="./1.jpg" style="margin-block-start: 1rem;">
</div>
<h4>4. margin-bottom    ↔  margin-inline-end</h4>
<div class="item">
    <img src="./1.jpg" style="margin-bottom: 1rem;">
    <img src="./1.jpg" style="margin-inline-end: 1rem;">
</div>

CSS：

.item {
    display: inline-block;
    border: solid deepskyblue;
    writing-mode: vertical-rl;
}