CSS writing-mode与margin水平合并实例页面

展示

代码

• 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>

• CSS：

  .box {
      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;
  }