Не работает line height html

line-height

Internet Explorer		Chrome	Opera	Safari	Firefox	Android	iOS
6.0+	8.0+	1.0+	3.5+	1.0+	1.0+	1.0+	1.0+

Краткая информация

Значение по умолчанию	normal
Наследуется	Да
Применяется	Ко всем элементам
Ссылка на спецификацию	http://www.w3.org/TR/CSS21/visudet.html#propdef-line-height

Версии CSS

Описание

Устанавливает интерлиньяж (межстрочный интервал) текста, отсчет ведется от базовой линии шрифта. При обычных обстоятельствах расстояние между строками зависит от вида и размера шрифта и определяется браузером автоматически. Отрицательное значение межстрочного расстояния не допускается.

Синтаксис

line-height: множитель | значение | проценты | normal | inherit

Значения

Любое число больше нуля воспринимается как множитель от размера шрифта текущего текста. Например, значение 1.5 устанавливает полуторный межстрочный интервал. В качестве значений принимаются также любые единицы длины, принятые в CSS — пикселы (px), дюймы (in), пункты (pt) и др. Разрешается использовать процентную запись, в этом случае за 100% берется высота шрифта.

normal Расстояние между строк вычисляется автоматически. inherit Наследует значение родителя.

HTML5 CSS2.1 IE Cr Op Sa Fx

Результат данного примера показан на рис. 1.

Рис. 1. Применение свойства line-height

Объектная модель

[window.]document.getElementById(» elementID «).style.lineHeight

Браузеры

Internet Explorer до версии 7.0 неправильно вычисляет высоту строк для изображений и элементов форм. Также в этом браузере не поддерживается значение inherit .

Источник

При перезагрузке страницы сбивается межстрочный интервал — ошибки css вёрстки — свойство line-height

Нынче поправлял сайт одной знаменитой блогерше (имени не называю: боюсь преследования)) — так вот, поправлял, скажем так, вёрстку блога: ей кто-то из читателей подсказал, мол, текст при перезагрузках страниц то и дело принимает различный графический вид, попросту — меняется межсточный интервал при переходе от страницы к странице на мобильнике… (говорилось о браузере Опера-Мини).

Скажу честно, сразу мелькнуло подозрение закавыки со свойством line-height, но я как-то о нём подзабыл в процессе… короче взялся за работу…

Чем такие поломки дизайна сайта сложны? а тем, что их нужно отслеживать на реальном девайсе — ни тестерах всяких, но реальном гаджете. Почему? а потому что всякие тестеры на компе естественно имеют мощность используемого компьютера/ браузера! Попросту говоря — многие из тонких дефектов не отследить…

Работа была выполнена. Заказчица довольна: и теперь не теряет многочисленных читателей, которые почитывают её посты по ночам с телефонов))

И если кому-то тема интересна, давайте разбираться: акуна-матата…

в качестве нерекламы: (хотя всегда нужно сказать пару лестных слов, коли разработчики их заслуживают))

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

Главное его преимущество — лёгкость и скорость загрузки просматриваемых страниц, что немаловажно, имея у себя в арсенале качества нашего высокоскоростного интернета.

Я видел много товарищей (достаточно продвинутых в иной сфере, однако — мелких познаний интернетing)) которые ждут по минуте-две загрузку простенького сайта: это логично — если браузер без всяких экономических ограничений грузит всякие примочки js и пр. пр. прелести, фитюльки которых хороши только на стационарном компе. На мои советы использовать Оперу, большинство пользователей реагирует как на волка из леса, дескать, нужно переустанавливать «родной» браузер и причём ненароком попортить телефон… У меня все эти осторожности вызывают улыбку…

Ну ладно — приступим к теме:

ошибки css вёрстки — свойство line-height

Короче, в итоге около часовых исследований недр сайта на предмет лага (ошибки, бага… как угодно) оказалось виною свойство line-height, а точнее его значение !

Что получалось при моих тестах:

При заходе на странички сайта вроде бы всё в порядке… однако, спустя пару перезагрузок — ошибка на лице окна браузера: действительно — расстояние между строк изменилось, стало в два раза шире по вертикали. В принципе можно читать и такой образ текста на мобиле… да и к тому же в мощных браузерах (и конечно же на компах) никаких ошибок не будет видно !! однако, заказчица (да и я) сочли этот экзерсис именно ошибкой, а коли — ошибка, значит нужно решать задачу!

если просматривать сайт, не включая экономичный режим браузера — всё нормально (разъяснится ниже по тексту) но как только переключаюсь в режим экономии МГб и скоростей — баг !

К стати сказать: структура текста сайта возможно сломается и в шапке сайта, и в подвале, и в сайдбаре — всё в прямой зависимости от языка (и ошибок) документа CSS вашего сайта!

Не забывайте обновлять документацию во время !

И всё-таки почему такие ошибки и нечитаемость браузером происходят??

Тут вряд ли стоит винить кого-то конкретно из разработчиков: всего интернета или же конкретного браузера, либо программистов в целом))

Опера-мини использует множества своих сторонних серверов, проходя через которые данные сайта обрабатываются и доставляются клиенту (нам с вами) — ввиду чего «браузер» добивается приличных скоростей загрузки… и как следствие приятной работы.

Как нетрудно догадаться, в случаях всяких сокращений возможны какие-то незначительные потери, коли в вёрстке просматриваемого сайта присутствуют ошибки!

Так же можно предположить «нечитаемость» всевозможными временными адаптациями языка CSS.

И это справедливо: ведь существуют правила языков программирования!! Вот об этих правилах коротенько и потолкуем:

Такое свойство line-height, в случае применения к блочному элементу, всегда определяет высоту каждой текстовой строки . Однако не следует путать с межстрочным расстоянием (меж графическими элементами) в большинстве же графических программ (наподобие Photoshop), которое определяет пространство между строками в абзаце.

Следует запомнить и не забывать, что, несмотря на то, что это значение сво-ства выполняет одну и ту же задачу, а именно интервал между строк текста , выполняется (обрабатывается) это по-разному.

Свойство line-height использует следующие единицы:

Вот о безразмерных числа свойства и поговорим пристальнее)

Эти безразмерные значения в основном действуют как проценты. Таким образом — 150% равно 1.5. …последнее является, как понимаете, более компактным и читаемым, а в нашем случае обусловило ошибку нечитаемого экономным вариантом браузером.

То есть в шаблоне заказчицы (в файле стилей) свойство было во всех случаях обозначено в px, что и привело к нечитаемости, а следовательно и ошибке.

Мне пришлось полностью прогнать файл стилей и поправить несоответствия.

Источник

Почему не работает line-height у кнопки?

В общем вопрос глупый, но имеет место быть.

Есть кнопка, у неё высота 48px, а line-height должен быть 34px
Суть в том, что если уменьшать line-height меньше 36px, то текст тупо не двигается.

Почему так и как быть?

• Вопрос задан более трёх лет назад
• 1074 просмотра

Внутренние отступы потому что, скорее всего, заданы, padding которые.

Upd:
«Еще такой эффект даёт inline-block» — имел ввиду, что при применении этого свойства, тоже не даёт уменьшить line-height.

И выравнивай как тебе угодно.

«Еще такой эффект даёт inline-block» — имел ввиду, что при применении этого свойства, тоже не даёт уменьшить line-height.

И выравнивай как тебе душе угодно.

А ну тогда все понятно. Button и другие input-подобные элементы — это вообще отдельная история. Каждый браузер обвешивает их своими правилами которые не сдвинуть, либо сдвинуть очень сложно. Проблема довольно распространенная.

Источник

Не работает line-height?

здравствуйте. вопрос с бэкграундом решил. оказалось не правильно адрес прописал. теперь проблема не работает межстрочный интервал текста в полупрозрачном блоке. точнее он работает если увеличивать интервал больше указанного в photoshop
в html прописал код так:
div
div
h1 об университете /h1
p Сегодня, телекоммуникации и информационные системы в области информационных технологий является ведущим учебным заведением в Центральной Азии. В составе Университета и его региональных филиалов действуют 13 факультетов, 62 кафедр и ведется подготовка кадров по 23 направлениям образования /p
/div
/div
в css:
.tt_banner <
background-image: url(../img/src/P1040491.jpg);
width: 100%;
height: 700px;
background-repeat: no-repeat;
background-size: 100% 700px;
margin-top: 13px;
position: relative;
>
.tt-info <
position: absolute;
border: 1px solid transparent;
left: 62px;
top: 127px;
width: 592px;
height: 259px;
background-color: rgba(57, 70, 88, 0.72);
text-align: left;
>

.tt-info h1 <
text-transform: uppercase;
font-size: 52px;
font-family: ‘latomedium’, Arial, sans-serif;
color: #ffffff;
padding: 34px 58px 22px 28px;
>

.tt-info p <
color: #ffffff;
font-size: 16px;
font-family: ‘latoregular’, Arial, sans-serif;
overflow: hidden;
padding: 0 121px 38px 28px;
line-height: 14px;
>
подскажите пожалуйста где ошибка.

Источник

Проблема Line height с элементами inline-block

Этот топик выбран для перевода в качестве учебного пособия по одному из свойств CSS
Автор топика очень доходчиво, на примерах поясняет все нюансы использования line-height

1 ответ 1

line-height применяется, но вам нужно понять, как она применяется. Если мы ссылаемся на спецификацию:

В элементе контейнера блока, содержимое которого состоит из элементов inline-level , line-height задает минимальную высоту линейных блоков внутри элемента

Устанавливая line-height: 5 для родительского элемента, вы устанавливаете минимальную высоту для linebox .

На незаменяемом inline элементе line-height указывает высоту, которая используется при расчете высоты линейного блока.

Установив line-height:1,5; , вы определили высоту строки.

Чтобы объяснить это проще, — у вас есть linebox с высотой, равной 1,5 , внутри linebox с высотой, равной 5 , но вы не сможете это увидеть.

Если вы увеличите line-height для child и достигнете 5 , вы достигнете минимальной высоты и начнете увеличивать linebox , определенный родительским элементом.

Чтобы увидеть это, вам нужно применить vertical-align . Если line-height дочернего элемента меньше, чем line-height родительского элемента, вы можете выровнять:

Если вы увеличите line-height , вы увидите, что выравнивание не будет иметь никакого эффекта, так как linebox равен по высоте linebox родителя, и нет места для вертикального выравнивания:

Чтобы сделать своего рода аналогию, это похоже на установку height/min-height внутри контейнера flexbox . Когда высота элемента меньше, мы можем выровнять:

Но когда height больше и достигает минимума, определенного родителем, выравнивать нечего, и общая высота родителя может увеличиться, если мы продолжим увеличивать высоту childs :

Вы также можете заметить, что вы применяете width: 100% , которое не будет влиять на inline элемент, но будет применяться к inline-block , заставляя каждый элемент размещаться на отдельной строке.

Та же логика все еще применима: каждая строка имеет минимальную высоту, определяемую родительской высотой строки, и может увеличиваться только в том случае, если высота строки дочернего элемента больше родительского элемента.

Чтобы доказать, что inline и inline-block ведут себя одинаково, вы можете вызвать разрыв строки с помощью элемента inline , и вы получите тот же эффект:

Теперь, если вы установите a в качестве элемента block , у вас больше не будет элемента уровня inline внутри родительского контейнера, поэтому его line-height не будет иметь никакого эффекта

Добавьте текст внутри родительского элемента, и вы увидите, что line-height снова будет определена, чтобы определить линию, где находится текст:

Источник