Jump to content
  • 0

Не изменяется высота строки

TorchTT

Asked by TorchTT,

 Share

Question

TorchTT Explorer

TorchTT

Posted
Posted

Если у элемента <a> указать размер шрифта 14px, то line-height перестает изменятся при ввода значений, меньших размера шрифта.

HTML:


<ul class="someClass">
     <li>
          <a href="#">SometextSometextSometextSometexSometextSometextSometextSometexSometextSometextSometextSometexSometextSometextSometextSometex
     </li>
</ul>

CSS:


.someClass li a {
    font-size: 14px;
    line-height: 4px;
}

Подскажите, пожалуйста, по какой причине не изменяется высота строки?

Link to comment
Share on other sites

2 answers to this question

Recommended Posts

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
 Share
Go to question listing

  • Similar Content

    • SnowSilver
      line-height в inline и inline-block
      By SnowSilver
      Почему 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.
       
       
       
    • Arinden
      Кроссбраузерность line-height или как правильно центровать текст по вертикали
      By Arinden
      Всем здравствуйте! Столкнулся с проблемой и никак не могу найти рабочее решение. Помогите неучу, пожалуйста! Вот ссылка на 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. Что-же задают тогда эти пиксели в размере шрифта?
    • ekkl
      Выровниять по вертикали текст с разными разными шрифтами
      By ekkl
      Есть плавающий блок содержащий одну строку за ней следует два значка (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
    • Compaq6720s
      Можно как-то задать два шрифта в "font: ...", но с разными font-size/line-height?
      By Compaq6720s
      Доброе!
      Можно как-то расширить 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;
      Есть какой-то выход из подобной ситуации?
    • ExtendedPlay
      Проблема с line-height в Firefox
      By ExtendedPlay
      Привет всем.
      Заметил, что в firefox выравнивание текста по baseline происходит отлично от других браузеров. Baseline не совпадает на 1px.
      Вот что я имею ввиду:

      Кто как с этим борется?
      Исходник на jsfiddle: http://jsfiddle.net/KtbDU/
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. See more about our Guidelines and Privacy Policy

  I accept