Drawing rectangles with CSS

Question

I have a use case whereby I want to draw rectangles in CSS. I need them to look like this:

Desired block layout

I've managed to get the smaller and taller boxes drawn but can't work out how to draw those that drop below the line. Here's a fiddle

Heres' my 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>

Here's my CSS so far:

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

Yes +1. it didn't even occur to me to move the margin-bottom down using a negative value. — Luke, Nov 16 '13 at 02:23

Michelle · Accepted Answer · 2013-11-16T02:34:11.060

5

Using margins may affect other elements, especially if you plan on including other content on your page. (See this) I'd recommend using position: relative combined with top: 2em. What that does is it pushes the element down 2em, relative to the original position of the element.

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

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

(On an unrelated note... here's a little bonus if you want to fully imitate the image and remove whitespace. You'll net to set a manual size to all <p> elements though.)

edited Nov 16 '13 at 02:34

answered Nov 16 '13 at 02:22

Michelle

2,702
2
23
35

I understand how the answers using `margin-bottom`work. I'll have to look up what top does to work this one out. Thanks. – Luke Nov 16 '13 at 02:25
While a negative `margin-bottom` works, it's kind of hackish trick; I'd definitely recommend this solution instead. – Nightfirecat Nov 16 '13 at 02:26
1

Added a little explanation! Hope it helps. – Michelle Nov 16 '13 at 02:31
+1 for adding the explanation. I'd love to see more people explaining the _why_ as well as the _how_. – John H Nov 16 '13 at 02:41

score 3 · Answer 2 · edited May 23 '17 at 12:13

3

The simplest way is to use a negative margin-bottom to achieve this (you don't need to use positioning):

CSS:

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

JSFiddle

Note: also comment the whitespace between display:inline-block elements to remove it.

Reference - see this to see more hacks how to remove the whitespace between display:inline-block elements.

edited May 23 '17 at 12:13

Community

1
1

answered Nov 16 '13 at 02:25

Vucko

20,555
10
56
107

+1 for getting the fiddle up so quickly and for the whitespace hack but I think I'm going to go with the `top: 2em;` – Luke Nov 16 '13 at 02:32

score 0 · Answer 3 · answered Nov 16 '13 at 02:22

0

Try this.

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

answered Nov 16 '13 at 02:22

Rikka

999
8
19

Drawing rectangles with CSS

3 Answers3