CSS writing-mode与margin水平重叠实例页面

代码：

CSS代码：

.box {
    width: 400px;
    background-color: #f0f3f9;
    overflow: hidden;
}
.list {
    margin: 20px;
    background-color: #cd0000;
    color: #fff;    
}

/* IE8+ */
.verticle-mode {
    writing-mode: tb-rl;
    -webkit-writing-mode: vertical-rl;      
    writing-mode: vertical-rl;
}

HTML代码：

<p><strong>默认流-垂直margin重叠</strong></p>
<div class="box">
    <div class="list">margin:20px;</div>
    <div class="list">margin:20px;</div>
</div>

<p><strong>垂直流-水平margin重叠</strong></p>
<div class="box verticle-mode">
    <div class="list">margin:20px;</div>
    <div class="list">margin:20px;</div>
</div>

效果：

默认流-垂直margin重叠

margin:20px;

垂直流-水平margin重叠

margin:20px;