使用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 */
}

- Luke

---

这件衣服合适吗？ - Vucko

如Vucko所建议的那样，使用负margin-bottom。 - Zach Saucier

是的 +1。我甚至没有想到可以使用负值将 margin-bottom 向下移动。 - Luke

@Luke 这就是我们在这里的原因 - 来帮助 :) - Vucko

Answer 1

使用边距可能会影响其他元素，尤其是如果您计划在页面上包含其他内容。 (查看这个) 我建议使用position: relative与top: 2em相结合。这将把元素向下移动2em，相对于元素的原始位置。

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

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

（无关的话题...如果您想完全模仿该图像并删除空白，请点击这里获取额外的奖励。但是，您需要手动设置所有<p>元素的大小。）

- Michelle

---

我理解使用 margin-bottom 的答案是如何工作的。我需要查一下 top 是如何工作的才能解决这个问题。谢谢。 - Luke

虽然负的 margin-bottom 可以起作用，但这种方法有点 hackish；我强烈建议使用这个解决方案。 - Nightfirecat

添加了一点解释！希望有所帮助。 - Michelle

我希望看到更多的人不仅解释“如何”，还要解释“为什么”。+1 - John H

Answer 2

最简单的方法是使用负的margin-bottom来实现这一点（不需要使用positioning）： CSS：

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

JSFiddle

注意：还需注释掉display:inline-block元素之间的空格以删除它们。

参考资料 - 查看更多如何删除display:inline-block元素之间空白的技巧。

- Vucko

---

+1 非常感谢您能够如此迅速地完成这个小问题，并且使用空格 hack。但是我认为我会选择 top: 2em;。 - Luke

Answer 3

试试这个。

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

- Rikka