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

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

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

<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;
}

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

Пример

РЕДАКТИРОВАТЬ:

Дополнительная информация, поскольку моя точка зрения, по-видимому, не очень ясна: поле составляет 10 пикселей в соответствии с такими инструментами, как Firebug. Я не об этом спрашиваю. Однако из-за того, как отображаются шрифты, поле текста на самом деле больше, чем фактический размер текста. Это приводит к тому, что ВИЗУАЛЬНОЕ поле становится больше заданного поля (что можно проверить, измерив его в Photoshop или подобном программном обеспечении). Я ищу информацию о соотношении между размером текстового поля и фактическим размером, чтобы правильно определить поля.


text html css margins
person teel    schedule 31.05.2011    source источник

Ответы (3)


arrow_upward
2
arrow_downward

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

person GolezTrol    schedule 31.05.2011
comment
Да, именно это я и имел ввиду своим вопросом. Я хотел понять основы этого, чтобы я мог более надежно устанавливать точные поля для текстов, содержащих разные размеры шрифта. - person teel; 31.05.2011
comment
Вы уже устанавливаете точные поля. Пространство между буквой и верхней частью строки не может быть определено в CSS, так как это свойство используемого вами шрифта, и оно может даже различаться между версиями шрифта, не говоря уже о разных символах в одном и том же шрифте! Вы должны проектировать высоту строки, а не шрифт. Если по определенной причине вам нужно, чтобы точные пиксели были измерены от буквы, вам действительно следует измерить это расстояние в инструменте рисования и внести соответствующие коррективы в свой CSS. Но я думаю, что это должно быть исключением. - person GolezTrol; 31.05.2011
comment
В этом случае вы должны измерить расстояние между верхней частью буквы и верхней частью строки (которое лучше всего видно, если текст выделен). Затем вычтите количество пикселей, которое вы измерили, из поля, которое вы хотите иметь. Таким образом, если расстояние от верха буквы «H» до верха выделения составляет 3 пикселя, а вы хотите, чтобы поле было 10 пикселей, вы должны установить его равным 7 пикселям. Если это поле между двумя линиями, вы должны сделать аналогичное измерение от нижней части «j» до нижней части выделения. Затем вычтите оба найденных значения из исходных 10 пикселей, чтобы получить необходимое поле. - person GolezTrol; 31.05.2011
comment
Да спасибо. Я думаю, что мне придется пойти с ручным методом тогда. - person teel; 01.06.2011

arrow_upward
0
arrow_downward

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

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

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

person solendil    schedule 31.05.2011
comment
Да, поле составляет 10 пикселей в соответствии с firebug и т. д. Я использовал Photoshop для его измерения, потому что мне нужно, чтобы пространство между точным верхом текста и изображением было ровно 10 пикселей, а не то, что браузер считает 10 пикселями. Поле текста обычно больше фактического размера символа. - person teel; 31.05.2011

arrow_upward
0
arrow_downward

Выглядит нормально

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

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

person Eric    schedule 31.05.2011
comment
Если вы сделаете снимок экрана и сравните промежутки между текстом и блоками в Photoshop, вы увидите, что на самом деле это расстояние не равно 10 пикселям. - person teel; 31.05.2011