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:

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

Answer 1

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.)