Вопрос по html, text-align, vertical-alignment, paragraph, css – Как убрать пробел в верхней части тега <p> / выровнять содержащийся текст по верху контейнера?

3

Это, несомненно, глупый вопрос, но яу меня плохой день и этосмущает меня!

Если вы просматриваетеhttp://jsfiddle.net/E6kGP/1/ затем вы можете увидеть 2 простых элемента div рядом друг с другом, каждый из которых содержит тег p, каждый с разным размером шрифта и соответствующей высотой строки.

Между верхней частью контейнера p и верхней частью содержимого текста существует небольшой зазор, который различается в зависимости от размеров шрифта (и высоты строк). Это означает, что вершина текста в каждом p не выровнена по вертикали. Если бы высоты линии не 'не соответствует размеру шрифта, тогда я мог бы это понять, но, конечно, если они одинаковы, то высота строки должна соответствовать самому высокому символу, и, следовательно, самая высокая точка первой строки должна быть вершиной контейнера p? Очевидно, что это можно взломать с помощью отступов / полей или абсолютного позиционирования, но я хотел бы понять, почему это не такпо умолчанию и какой правильный способ это исправить?

По просьбе SO, код из jsfiddle также находится ниже:

div {float: left; width: 50%;}
p {margin:0 0 1em;padding:0;}
#left p {line-height:36px;font-size:36px;}
#right p {line-height:16px;font-size:16px;}


<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>


<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>

Большое спасибо всем!

Это'там вы просто должны присмотреться, этотолько несколько пикселей. deshg
Я не'Я не вижу места наверху в вашей скрипке ..... Bhojendra Rauniyar

Ваш Ответ

2   ответа
2

Это может быть для акцентированных символов, попробуйте поставить Ä в первый

, дополнительное пространство помогает разместить акцент. Тем не менее, яЯ не уверен на 100%, что является окончательной причиной.

Вы всегда можете специально нацелить первую строку

 Элемент, чтобы уменьшить его, используя:

p::first-line {
    line-height: 0.8em;
}

Хотя и предоставлено, это не решаетЗачем' issue.I»

@deshg, яВ течение последнего дня мы искали больше информации, но боялись, что не смогли найти что-то еще SW4
я видел такой вопрос раньше (но могуне могу найти это ...), и они сказали, что это было причиной. Albzi
@Mayank, это тоже было бы моим предположением, ища яМы не нашли четкого ответа на это, может быть, браузер рендеринг может быть фактором? SW4
@ Mayank Спасибо за это! Albzi
1

Как сказал ExtPro, этоs для размещения акцентированных символов. Простой обходной путь должен иметьmargin-top:-px; так что вы вручную выровняете его.

Как говорит Дэймон, это будет по-разному отображаться в разных браузерах (но тогда и ExtPro будет 'с решением, но не так). В ответ Деймонувопросы о том, почему мыты делаешь этопотому что так дизайнерское агентство хочет, чтобы оно было выложено deshg
Не настоящее решение, так как шрифты (особенно веб-шрифты) могут обрабатываться браузерами совершенно по-разному. Вы должны иметь свой дизайн, чтобы смягчить проблему. Почему вы используете два разных размера шрифта рядом друг с другом? Sascha
Да этоЭто ни в коем случае не лучшее решение или даже хорошее. Что я имел в видупростая работа вокруг разве это не так?фиксирует проблема, но в том, что вы можете легко выровнять их вручную. @DamonGant Albzi

Похожие вопросы