CSS для позиционирования текста на основе текста? - PullRequest
Новая
       13

CSS для позиционирования текста на основе текста?

2 голосов
/ 23 мая 2010

alt text

Когда я изменяю размер шрифта в CSS, как мне сделать так, чтобы независимо от того, какой размер шрифта (от 12px до 200px), что "Cap Height" (рис) текста всегда будет «визуально» с отступом в 10 пикселей сверху?

В противном случае, что я делаю, каждый раз, когда я изменяю размер шрифта, я должен вернуться назад и переместить top / margin-topи т.д.

Вот что у меня есть:

CSS: 

#header .statement {
  position: relative;
  background: white;
  padding-top: 10px;
  display: inline;
  float: left;
  margin-left: 0;
  margin-right: 0;
  width: 960px;
}

#header .statement h3 {
  position: relative;
  font-size: 160px;
  letter-spacing: -10px;
  font-weight: bold;
  color: #141414;
  font-family: Helvetica, sans-serif;
  text-align: center;
}

Пример HTML: 

<div id='header'>
  <div class='intro'>
    Stuff before the statement
  </div>
  <div class='statement'>
    <h3>
      <p>A Statement</p>
    </h3>
    <div class='large_spacer'></div>
  </div>
  <div class='clearfix'></div>
</div>

Вот как это выглядит line-height: 0:

альтернативный текст http://ilove4d.com/ex/css-typography.png

Это с line-height: 1: альтернативный текст http://ilove4d.com/ex/css-typography-2.png

Если я изменю font-size с 160 на 20 пикселей,пробел пропорционально уменьшается ... Как мне обойти это?

Примечание: он добавляет как 20px дополнительный пробел, даже если margin: 0; padding: 0; ...

Ответы [ 3 ]

0 голосов
/ 23 мая 2010

Если вы действительно имеете в виду «сверху» высоты колпачка, а не как-то внутри поля высоты колпачка, то вы можете применить отступы CSS либо к элементу шрифта, либо к его родительскому контейнеру: 

<span class="something">Web Typography</span>

span.something {padding-top: 10px;}

ИЛИ ... 

<div class="something"><span>Web Typography</span></div>

.something {padding-top: 10px;}

Один из подходов подойдет в зависимости от того, какие другие стили вы применяете.

0 голосов
/ 23 мая 2010

Попробуйте добавить padding-top: 10px к #header .statement h3 {}

редактирование:

сбросили ли вы значения для #header .statement h3 p {}?

0 голосов
/ 23 мая 2010

В противном случае я делаю каждый раз Я изменяю размер шрифта, мне нужно идти назад и переставить верх / margin-top и т.д.

Почему бы вместо этого не установить bottom и margin-bottom элементов выше и ниже этого текста? Таким образом, вам не придется изменять стиль текста, разрыв всегда будет.

Кроме того, почему в мире вы можете использовать шрифт размером более 36 пикселей? В любом случае вы также можете использовать стиль line-height для этого, например line-height:30px; или любое другое значение.

...