HTML, CSS и вертикальные текстовые поля - PullRequest
Новая
       26

HTML, CSS и вертикальные текстовые поля

0 голосов
/ 31 мая 2011

Это, вероятно, базовый материал, поэтому, если есть какая-то онлайн-справка о том, как работает html-текст и поля, просто скажите мне ссылку.

В любом случае, у меня возникли проблемы с определением точных полей для текста. Ниже приведен пример изображения, div, содержащий текст под ним и еще один текст под div. Другие поля установлены на 0, а поля для div - 10px top & bottom, 0 left & right. По неизвестным мне причинам получается 16px top, 14px bottom. Я мог бы просто компенсировать ошибку с помощью определения полей, но я бы хотел знать, что происходит, вместо того, чтобы лечить симптомы. 

<img src="images/temp/img.png" />
<div><p>Testing</p></div>
<h2>Siirry</h2>

И стиль для div 

div {
    color:#f00;
    text-transform:uppercase;
    font-size:9px;
    line-height:9px;
    height:9px;
    margin:10px 0;
    overflow:hidden;
}

Пример изображения:

Example

EDIT:

Больше информации, так как моя точка зрения, очевидно, не очень ясна: Запас составляет 10 пикселей в соответствии с такими инструментами, как Firebug. Это не то, что я спрашиваю. Однако из-за способа отображения шрифтов поле текста на самом деле больше, чем фактический размер текста. Это приводит к тому, что поле VISUAL становится больше, чем определенное поле (это можно проверить, измерив его в Photoshop или аналогичном программном обеспечении). Я ищу информацию о связи между размером текстового поля и фактическим размером, чтобы я мог правильно определить поля.

Ответы [ 3 ]

2 голосов
/ 31 мая 2011

Это потому, что шрифт не использует всю высоту.Лучшим (хотя, возможно, и не идеальным) указанием будет выделение текста и проверка полей между черной рамкой и выделенным прямоугольником.И это относится к тексту ниже «тестирование» тоже.Это займет часть этих 14px.

0 голосов
/ 31 мая 2011

выглядит хорошо для меня

Здесь я добавил несколько фонов, чтобы вы могли видеть, куда идут коробки: http://jsfiddle.net/Eric/fcHZN/3/

Определенно, разрыв в 10pxмежду коробками.Похоже, ваш дополнительный интервал исходит от вашего изображения или текста Siirry, для которого у нас нет CSS.

0 голосов
/ 31 мая 2011

Я не могу воспроизвести вашу проблему. Не могли бы вы воссоздать проблемную ситуацию с http://jsfiddle.net/, чтобы поделиться ею с нами?

Однако есть проблемы с вашим CSS. Вы не должны указывать высоту 9px на элементе div (это минимум 20px из-за полей). Указание высоты строки не имеет ничего общего с размером шрифта, но с расстоянием между двумя строками текста (не ваш случай).

Последнее: что вы использовали для измерения полей (16 и 14 пикселей)? Редактор изображений? Вы должны использовать что-то вроде инструментов Firebug или Chrome Developper.

...