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:20px;

垂直流-水平margin重叠

margin:20px;
margin:20px;