Search the Community

Почему line-height на высоту inline элемента не влияет, а на inline-block влияет ? Например изначально, при дефолтном размере шрифта в 16px, высота строки в хроме показывает 18.18px. И если применим line-height: 1; - то высота не изменится. А если мы превратим строчный элемент в inline-block, тогда высота уменьшается до 15.45px - и тогда высота строки равняется почти размеру шрифта. Хотя line-height: 1 это множитель шрифта, по идеи в моем понимание высота должна равняться 16px, а не 15.45. Эти значения получены у не стандартного шрифта... Но это сути не меняет. Небольшая заготовка - https://codepen.io/anon/pen/Qxpgoe. Правда там у строчного элемента изначально 17px , а у инлайн блока после установки line-height:1 - 16px.

Всем здравствуйте! Столкнулся с проблемой и никак не могу найти рабочее решение. Помогите неучу, пожалуйста! Вот ссылка на JSFiddle и пример кода: HTML: <div class="lineHeight"> HELLO // line-height method </div> <div class="padding"> HELLO // padding method </div> CSS: @import url('https://fonts.googleapis.com/css?family=Open+Sans'); div { font-family: 'Open Sans', sans-serif; font-size: 14px; height: 100px; background: lightgreen; margin: 5px; padding-left: 10px; box-sizing: border-box; } .lineHeight { line-height: 100px; } .padding { padding-top: 42px; /* (100px - 14px) / 2 - 1px */ } Ситуация следующая: В случаях с line-height и padding текст ровно по центру, отступы по 45px сверху и снизу: - Google Chrome (v. 55.0.2883.87 m); - Mozilla Firefox (v. 50.1.0); - Opera (v. 42.0.2393.94); - Safari (macOS, v. 10.0 12602.1.32.7); Для line-height отступы по 45px, для padding 46px сверху и 44px снизу: - Safari (Windows, v. 5.1.7 7534.57.2); В случаях с line-height и padding текст ровно по центру, отступы 46px сверху и 44px снизу: - Internet Explorer 11 (v. 11.576.14393.0); - Microsoft EDGE (v. 38.14393.0.0); Я понимаю, что в ряде случаев это не принципиально, но что делать если блок с текстом это, например, меню, а сбоку от текста расположена ровная иконка, положение которой задано через background-position. Выравниваешь иконку для одного браузера - плывёт в другом. Выглядит весьма заметно и некрасиво. И Бог бы с этим эксплорером, но дело вот в чём, на Android 6.0.1 (device pixel ratio 4.0) стандартный интернет браузер, а также скаченный Google Chrome центруют неровно, также наблюдается расхождение в 1 пиксель, а вот на это уже закрывать глаза не хочется (большой скрин с Android): Что примичательно, высота первой буквы на настольных компьютерах 10px, а на андроиде чуть больше. Разумеется добиться идеальной картинки, да ещё и во всех браузерах одновременно, невозможно, но ведь это не какой-то частный случай, а вполне закономерное желание разместить текст по центру меню-бара. Я буду очень признателен за Вашу помощь и пояснения на предмет "best-practices". Что я пробовал для решения данной проблемы: - Использовал разные шрифты, а также разные методы подключения внешних шрифтов: link через html / @import в CSS для Google Fonts, а также @font-face url для скаченных шрифтов; - Задавал размеры шрифта, отступы, line-height в em / rem / px; - Пробовал различные комбинации line-height + padding; - Для создания иконок меню пробовал псевдо элементы, это конечно же решает проблему расположения иконок относительно текста, но не решает проблему центровки по вертикали. P.S. CSS сброшен. Meta viewport задан. Доп. вопрос от новичка: Почему, задавая размер шрифта 14px, заглавная буква по факту занимает 10px? При этом если я использую буквы типа "Й" и "р", высота занимаемая текстом будет уже 16px, но никак не 14px. Что-же задают тогда эти пиксели в размере шрифта?

Есть плавающий блок содержащий одну строку за ней следует два значка (icon-font) Проблема в том, что значки визуально выше строки текста. Чего я только не пробовал и line-height и padding/margin все равно значки выше строки. Еще меня волнует непонятный отступ внутреннего контейнера от нижнего края плавающего блока. margin / padding здесь кадется ни при чем. Стили (LESS) и контейнер #confirm { position: absolute; height: auto; border: 1px #230D33 solid; z-index: 1000; display: inline-block; overflow: hidden; text-indent: 0; box-sizing: border-box; background: #f9f0ff; box-shadow: 0 0 6px rgba(0, 0, 0, 0.5); .content { padding: 2px 8px; display: inline-block; font-size: 12px; line-height: 24px; overflow: hidden; width: 250px; box-sizing: border-box; } .conflink { display: inline-block; } a { width: 100%; color: #333; font-size: 20px; text-decoration: none; margin-left: 1em; outline-color: #EAC9FF; } a[role="ok"]:hover { color: forestgreen; } a[role="cancel"]:hover { color: #C22; }}<span id="confirm"><span class="content">{{message}}?<span class="conflink"><a href="#" role="ok" data-icon="B"></a><a href="#" role="cancel" data-icon="A"></a></span></span></span>Все в действии http://jsbin.com/wekixa/26/edit?css,js,output

Доброе! Можно как-то расширить http://htmlbook.ru/css/font Есть блок тектса, у него сейчас: font: 16px/19px 'Myriad Pro'; ... но если нет в системе Myriad Pro, хотелось бы следующим подрубить trebuchet ms c 15px/17px , ибо 16px/19px от Myriad Pro уже не подходят. Браузер может прочитать только такую конструкцию: font: 16px/19px 'Myriad Pro', trebuchet ms; но не такую... (которую бы хотелось) font: 16px/19px 'Myriad Pro', 15px/17px trebuchet ms; Есть какой-то выход из подобной ситуации?

Если у элемента <a> указать размер шрифта 14px, то line-height перестает изменятся при ввода значений, меньших размера шрифта. HTML: <ul class="someClass"> <li> <a href="#">SometextSometextSometextSometexSometextSometextSometextSometexSometextSometextSometextSometexSometextSometextSometextSometex </li> </ul> CSS: .someClass li a { font-size: 14px; line-height: 4px; } Подскажите, пожалуйста, по какой причине не изменяется высота строки?

Привет всем. Заметил, что в firefox выравнивание текста по baseline происходит отлично от других браузеров. Baseline не совпадает на 1px. Вот что я имею ввиду: Кто как с этим борется? Исходник на jsfiddle: http://jsfiddle.net/KtbDU/

Дело вот в чем, не раз замечаю что в хроме нужно ставить line-height больше чем в других браузерах. К примеру слева FF IE Opera справа Chrome Safari Как справиться с этим? Юзаю хак, но хотелось бы разобратся в причинах такого рендера. И найти более правильное решение. @media all and (-webkit-min-device-pixel-ratio:0) { button.button span span { line-height:29px; } } HTML <button class="button"> <span> <span> Join </span> </span> </button> Извиняюсь за большой CSS - верстаю под magento а там шаблоны не ахти. А менять каждый темплит времени нет. button.button { border:0; padding:0; margin:0; background:transparent; overflow:visible; cursor:pointer; vertical-align:middle; } a.button, button.button > span{ border:0; padding:0 9px; cursor:pointer; display:-moz-inline-stack; display:inline-block; text-decoration:none !important; position:relative; background: #44c8f5; background: -moz-linear-gradient(top, #44c8f5 0%, #1a95bf 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#44c8f5), color-stop(100%,#1a95bf)); background: -webkit-linear-gradient(top, #44c8f5 0%,#1a95bf 100%); background: -o-linear-gradient(top, #44c8f5 0%,#1a95bf 100%); background: -ms-linear-gradient(top, #44c8f5 0%,#1a95bf 100%); background: linear-gradient(to bottom, #44c8f5 0%,#1a95bf 100%); -webkit-border-radius:3px; -moz-border-radius:3px; -ms-border-radius:3px; -o-border-radius:3px; border-radius:3px; } a.button span, button.button span span { display:-moz-inline-block; display:inline-block; white-space:nowrap; text-transform:uppercase; font:13px/25px 'FranklinGothicURW-Dem', Arial, Helvetica, sans-serif; height:24px; color:#fff; }