Рисование прямоугольников с CSS

Question

У меня есть прецедент, в котором я хочу рисовать прямоугольники в CSS. Мне нужно, чтобы они выглядели так:

мне удалось получить более мелкие и более высокие коробки нарисованные, но не может работать, как привлечь тех, кто опускается ниже линии. Вот fiddle

Heres' мой 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

Попробуйте это.

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

Answer 3

Самый простой способ заключается в использовании отрицательного margin-bottom для достижения этой цели (вам не нужно использовать positioning):

CSS:

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

JSFiddle

Примечание: также комментарии пробелы между display:inline-block элементов, чтобы удалить его.

Reference - увидеть это, чтобы увидеть больше хаков как удалить пробельные между display:inline-block элементами.