Css не работать line height

Проблема 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 снова будет определена, чтобы определить линию, где находится текст:

Источник

Не работает 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;
>
подскажите пожалуйста где ошибка.

Источник

При перезагрузке страницы сбивается межстрочный интервал — ошибки 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 as a percentage not working

I am having an issue with line-height that I cannot quite get my head around.

The following code will center an image within a div:

However, if I change the line height to 100%, then the line height does not take effect (or at least does not become 100% of the div).

Does anyone know what I am doing wrong?

10 Answers 10

line-height: 100% means 100% of the font size for that element, not 100% of its height. In fact, the line height is always relative to the font size, not the height, unless its value uses a unit of absolute length ( px , pt , etc).

I know this question is old, but I found what for me is the perfect workaround.

I add this css to the div that I want to center:

This works every time and it is clean.

Edit: Just for completion’s sake, I use scss and I have a handy mixin that I include on every parent who’s direct children I want to have vertically centered:

Full explanation: div:before will add an element inside the div, but before any of its children. When using :before or :after we must use a content: declaration otherwise nothing will happen, but for our purpose, the content can be empty. Then we tell the element to be as tall as its parent, as long as its parent’s height is defined and this element is at least inline-block. vertical-align defines the vertical position of self related to parent, as opposed to text-align that works differently.

The @mixin declaration is for sass users and it would be used like this:

Источник