用CSS绘制矩形

Question

我有一个用例,我想在CSS中绘制矩形.我需要它们看起来像这样:

我已经设法得到更小更高的盒子,但无法弄清楚如何绘制掉落在线下的那些盒子.这是一个小提琴

继承人我的HTML:

<div class="word">
    <p class="letter taller"></p>
    <p class="letter"></p>
    <p class="letter"></p>
    <p class="letter hanging"></p>
    <p class="letter"></p>
    <p class="letter taller"></p>
    <p class="letter"></p>
</div>

到目前为止这是我的CSS:

p {
    display: inline-block;
}
.letter {
    padding 1.618em;
    border-width: 1px;
    border-style: solid;
    width: 2em;
    height: 2em;

}
.taller {
    height: 4em;
}

.hanging {
 /* not sure what to implement here */
}

Answer 1

使用边距可能会影响其他元素,尤其是当您计划在页面上包含其他内容时.(见这个)我建议position: relative结合使用top: 2em.什么是所做的就是推动因素下2em,相对于元素的初始位置.

.hanging {
  height: 4em; 
  position: relative;
  top: 2em;
}

http://jsfiddle.net/WtuyL/6/

(在一个不相关的注释中... 如果你想完全模仿图像并删除空白,这里有一点奖励.你可以通过网络设置所有<p>元素的手动大小.)