html - CSS 在内联 block 元素上旋转后，With/Height 布局未对齐

Question

旋转一组矩形 inline-block 元素后，布局流程中不考虑新的宽度和高度。这意味着它们彼此重叠。使用 CSS 有什么办法解决这个问题吗？

在下面的示例中，请注意左边距是如何被覆盖的，并且第二行 block 上方有一个大的空白区域。

p {
  width: 20px;
  height: 80px;
  background: red;
  margin-left: 10px;
  display: inline-block;
  border: #FFF solid 1px;
}
.r {
  transform: rotate(90deg);
}

Before:
<br/>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<hr/>After:
<br/>
<p class='r'></p>
<p class='r'></p>
<p class='r'></p>
<p class='r'></p>
<p class='r'></p>

实例:http://codepen.io/anon/pen/vKqjoR?editors=1100#0

Answer 1

margin-left: 75px 会给它们均匀的间距。

p {
  width: 20px;
  height: 80px;
  background: red;
  margin-left: 10px;
  display: inline-block;
  border: #FFF solid 1px;
}
.r {
  transform: rotate(90deg);
  margin-left: 75px;
}

Before:
<br/>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<hr/>After:
<br/>
<p class='r'></p>
<p class='r'></p>
<p class='r'></p>
<p class='r'></p>
<p class='r'></p>