我有一个用例,我想在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 */
}
答案 0 :(得分:5)
使用边距可能会影响其他元素,尤其是当您计划在网页上包含其他内容时。 (See this)我建议将position: relative
与top: 2em
结合使用。它的作用是将元素向下推2em
,相对到元素的原始位置。
.hanging {
height: 4em;
position: relative;
top: 2em;
}
(如果您想完全模仿图片并删除空格,请在不相关的注释中添加here's a little bonus。您可以通过网络设置所有<p>
元素的手动大小。)
答案 1 :(得分:3)
最简单的方法是使用否定margin-bottom
来实现此目的(您不需要使用positioning
):
<强> CSS 强>:
.hanging {
margin-bottom: -16px;
height:4em;
}
注意:还要注释display:inline-block
元素之间的空格以将其删除。
Reference - 请参阅此处了解更多 hacks 如何删除display:inline-block
元素之间的空白。
答案 2 :(得分:0)
试试这个。
.hanging {
height:4em;
margin-bottom:-1em;
}