用CSS绘制矩形

Question

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

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

继承人的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

使用边距可能会影响其他元素，尤其是当您计划在网页上包含其他内容时。 （See this）我建议将position: relative与top: 2em结合使用。它的作用是将元素向下推2em，相对到元素的原始位置。

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

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

（如果您想完全模仿图片并删除空格，请在不相关的注释中添加here's a little bonus。您可以通过网络设置所有<p>元素的手动大小。）

Answer 2

最简单的方法是使用否定margin-bottom来实现此目的（您不需要使用positioning）：

<强> CSS ：

.hanging {
    margin-bottom: -16px;
    height:4em;
}

JSFiddle

注意：还要注释display:inline-block元素之间的空格以将其删除。

Reference - 请参阅此处了解更多 hacks 如何删除display:inline-block元素之间的空白。

Answer 3

试试这个。

.hanging {
    height:4em;
    margin-bottom:-1em;
}