Jump to content
  • 0

line-height в inline и inline-block


SnowSilver
 Share

Question

Почему 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.

 

 

 

Edited by SnowSilver
Link to comment
Share on other sites

2 answers to this question

Recommended Posts

  • 0

line-height это не высота строки, а расстояние между базовыми линиями соседних строк.

У текста есть запас на всякие там умлауты и иже с ними, у инлайн блоков запаса нет

Edited by AlexZaw
  • Like 1
Link to comment
Share on other sites

  • 0
В 11.06.2018 в 19:50, AlexZaw сказал:

line-height это не высота строки, а расстояние между базовыми линиями соседних строк

Строго говоря, не совсем.

Грубо упрощая, у строчного элемента есть две высоты: та, которая заливается фоном, реагирует на :hover и т.п., и та, которая влияет на высоту строки, в которой элемент находится. Изначально обе высоты определяются исключительно метриками шрифта (что-то-Ascent — «надводная» часть символа над базовой линией, что-то-Descent — «подводная» часть, и, опционально, что-то-Leading — дефолтный зазор между символами соседних строк, причем разные ОС используют разные метрики). Браузерный отладчик, скорее всего, показывает для него первую высоту.

Высоту заливки фона уменьшить нельзя, но можно увеличить верхним и нижним padding-ами. Высоту, на которую элемент «распирает» свою строку, можно и увеличить, и уменьшить — задав line-height. Разница между заданной line-height и дефолтной высотой (той, что по метрикам) делится пополам и по половине прибавляется сверху и снизу (так что элемент всегда центрируется в строке). Если line-height меньше, чем дефолтная высота, то фон элемента будет выступать вверх и вниз за границы строки, а буквы соседних строк будут частично перекрываться.

Инлайн-блок же внутри устроен именно как блок, со своим собственным контейнером строки. И его высота определяется высотой этой строки (тем, насколько его текст ее «распирает»), т.е. конкретным значением line-height. А снаружи этот блок вписан в строку (как картинка) и влияет на высоту этой строки своими внешними габаритами (включая padding/border/margin).

Link to comment
Share on other sites

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

  • Similar Content

    • By SnowSilver
      При дефолтном шрифте в 16 px, между блоками inline-block 4px отступа.


      Имеем такую верстку: 
      Результат в хром версии 61: 


      Отступа между псевдоэлементов before - inline-block который у нас в ширину в 1px и и первым блоком нету, но отступ должен быть!
      но если в хроме, в панели разработчиков, в DOM, у псевдоэлемента before выключить display: inline-block и включить, то станет нормально отображаться, попробуйте) 
      пример: 
       


      а вдругих браузерах сразу корректно отобразится
       
      что думаете на сей счет ?
       
      такой косяк с отступом проявляется только с псевдоэлементом inline-block и только в хром с большущим подозрением именно 61 версией...
    • 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. Что-же задают тогда эти пиксели в размере шрифта?
    • By Goodman-77
      Здравствуйте! 

      Помогите пожалуйста, разобраться.
      Известно, чтобы убрать пробелы между элементами - display: inline-block;
      Достаточно обнулить у всех элементов *font-size: 0;
      Но возникает вопрос - как в этом случае задать относительный шрифт (em, rem, %) внутри элементов inline-block, если font-size обнулен на глобальном уровне? 

      Получается верстка с помощью свойства display не подходит для резиновых шрифтов или всё-таки есть какие-то способы? 
    • By LordGuard
      Нужно расположить блоки, как на макете. Сделал блоки, присвоил им inline-block и 2 строка началась на уровне высокого блока, который должен занимать 2 строки. Что с этим делать?


    • By newjmrec1@gmail.com
      Здравствуйте! Помогите пожалуйста. Совмещаю html с css для создания адаптивного шаблона для рассылки писем. Вроде все адаптируется, но только шапка в мобильной версии почему-то смещается влево. Все перерыл, не могу понять почему. Спасибо!
       
      PS Возможно имеется лишний код, мог лишний раз куда-то добавить строчки из css.
       

      <html xmlns="http://www.w3.org/1999/xhtml"><head> <style type="text/css">.container { display:block!important; max-width:600px!important; margin:0 auto!important; /* makes it centered */ clear:both!important;} </style> <style type="text/css">.content { padding:15px; max-width:600px; margin:0 auto; display:block; </style> <style type="text/css">.content table { width: 100%; } </style> <style type="text/css">.column { width: 300px; float:left;}.column tr td { padding: 15px; }.column-wrap { padding:0!important; margin:0 auto; max-width:600px!important;}.column table { width:100%;}.social .column { width: 280px; min-width: 279px; float:left;} </style> <style type="text/css">ul.sidebar { background:#ebebeb; display:block; list-style-type: none;}ul.sidebar li { display: block; margin:0;}ul.sidebar li a { text-decoration:none; color: #666; padding:10px 10px;/* font-weight:bold; */ margin-right:10px;/* text-align:center; */ cursor:pointer; border-bottom: 1px solid #777777; border-top: 1px solid #FFFFFF; display:block; margin:0;}ul.sidebar li a.last { border-bottom-width:0px;}ul.sidebar li a h1,ul.sidebar li a h2,ul.sidebar li a h3,ul.sidebar li a h4,ul.sidebar li a h5,ul.sidebar li a h6,ul.sidebar li a p { margin-bottom:0!important;} </style> <style type="text/css">h1,h2,h3,h4,h5,h6 {font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; line-height: 1.1; margin-bottom:15px; color:#000;}h1 small, h2 small, h3 small, h4 small, h5 small, h6 small { font-size: 60%; color: #6f6f6f; line-height: 0; text-transform: none; }h1 { font-weight:200; font-size: 42px;}h2 { font-weight:200; font-size: 37px;}h3 { font-weight:500; font-size: 27px;}h4 { font-weight:500; font-size: 23px;}h5 { font-weight:900; font-size: 17px;}h6 { font-weight:900; font-size: 14px; text-transform: uppercase; color:#444;}.collapse { margin:0!important;}p, ul { margin-bottom: 10px; font-weight: normal; font-size:13px; line-height:1.6;}p.lead { font-size:17px; }p.last { margin-bottom:0px;}ul li { margin-left:5px; list-style-position: inside;} </style> <style type="text/css">{ margin:0; padding:0;}* { font-family: "Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif; }img { max-width: 100%; }.collapse { margin:0; padding:0;}body { -webkit-font-smoothing:antialiased; -webkit-text-size-adjust:none; width: 100%!important; height: 100%;} </style> <!-- If you delete this tag, the sky will fall on your head --><meta name="viewport" content="width=device-width"> <title>Центр Рушеля Блаво</title></head><body bgcolor="#FFFFFF" style="cursor: col-resize;"><style type="text/css">.container { display:block!important; max-width:600px!important; margin:0 auto!important; /* makes it centered */ clear:both!important;}</style><!-- HEADER --><style type="text/css">table.head-wrap { width: 100%;}.header.container table td.logo { padding: 15px; }.header.container table td.label { padding: 15px; padding-left:0px;}</style><table bgcolor="#999999" class="head-wrap"> <tbody> <tr> <td></td> <td class="header container"> <style type="text/css">.container { display:block!important; max-width:600px!important; margin:0 auto!important; /* makes it centered */ clear:both!important;} </style> <div class="content"> <style type="text/css">.content { padding:15px; max-width:600px; margin:0 auto; display:block; </style> <style type="text/css">.content table { width: 100%; } </style> <table bgcolor="#999999"> <tbody> <tr> <td> <style type="text/css">table.head-wrap { width: 100%;} </style> <img src="http://placehold.it/200x50/" /></td> <td align="right"> <style type="text/css">table.head-wrap { width: 100%;} </style> <h6 class="collapse" style="text-align: right;">Hero</h6> </td> </tr> </tbody> </table> </div> </td> <td> <style type="text/css">table.head-wrap { width: 100%;} </style> </td> </tr> </tbody></table><!-- /HEADER --><!-- BODY --><style type="text/css">table.body-wrap { width: 100%;}</style><table class="body-wrap"> <tbody> <tr> <td></td> <td bgcolor="#FFFFFF" class="container"> <div class="content"> <style type="text/css">table.body-wrap { width: 100%;} </style> <table> <tbody> <tr> <td> <h3>Welcome, Elijah Baily</h3> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et.</p> <!-- A Real Hero (and a real human being) --> <style type="text/css">a { color: #2BA6CB;}.btn { text-decoration:none; color: #FFF; background-color: #666; padding:10px 16px; font-weight:bold; margin-right:10px; text-align:center; cursor:pointer; display: inline-block;}p.callout { padding:15px; background-color:#ECF8FF; margin-bottom: 15px;}.callout a { font-weight:bold; color: #2BA6CB;}table.social {/* padding:15px; */ background-color: #ebebeb; }.social .soc-btn { padding: 3px 7px; font-size:12px; margin-bottom:10px; text-decoration:none; color: #FFF;font-weight:bold; display:block; text-align:center;}a.fb { background-color: #3B5998!important; }a.tw { background-color: #1daced!important; }a.gp { background-color: #DB4A39!important; }a.ms { background-color: #000!important; }.sidebar .soc-btn { display:block; width:100%;} </style> <p><img src="http://placehold.it/600x300" /></p> <!-- /hero --><!-- Callout Panel --> <p class="callout">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt. <a href="javascript:;" target="_self">Do it Now! »</a></p> <!-- /Callout Panel --> <h3>Title Ipsum <small>This is a note.</small></h3> <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> <a class="btn">Click Me!</a><br /> <br /> <!-- social & contact --> <style type="text/css">table.body-wrap { width: 100%;} </style> <table class="social" width="100%"> <tbody> <tr> <td><!— column 1 --> <style type="text/css">table.body-wrap { width: 100%;} </style> <table align="left" class="column"> <tbody> <tr> <td> <h5>Connect with Us:</h5> <p><a class="soc-btn fb" href="javascript:;" target="_self">Facebook</a> <a class="soc-btn tw" href="javascript:;" target="_self">Twitter</a> <a class="soc-btn gp" href="javascript:;" target="_self">Google+</a></p> </td> </tr> </tbody> </table> <!-- /column 1 --><!— column 2 --> <style type="text/css">table.body-wrap { width: 100%;} </style> <table align="left" class="column"> <tbody> <tr> <td> <h5>Contact Info:</h5> <p>Phone: <strong>408.341.0600</strong><br /> Email: <strong><a href="emailto:hseldon@trantor.com">hseldon@trantor.com</a></strong></p> </td> </tr> </tbody> </table> <!-- /column 2 --></td> </tr> </tbody> </table> <!-- /social & contact --></td> </tr> </tbody> </table> </div> </td> <td></td> </tr> </tbody></table><!-- /BODY --><!-- FOOTER --><style type="text/css">table.footer-wrap { width: 100%; clear:both!important;}.footer-wrap .container td.content p { border-top: 1px solid rgb(215,215,215); padding-top:15px;}.footer-wrap .container td.content p { font-size:10px; font-weight: bold; }</style><table class="footer-wrap"> <tbody> <tr> <td></td> <td class="container"><!-- content --> <div class="content"> <table> <tbody> <tr> <td align="center"> <p><a href="javascript:;" target="_self">Terms</a> | <a href="javascript:;" target="_self">Privacy</a> | <a href="javascript:;" target="_self"><unsubscribe>Unsubscribe</unsubscribe></a></p> </td> </tr> </tbody> </table> </div> <!-- /content --></td> <td></td> </tr> </tbody></table><!-- /FOOTER --><style type="text/css">table.body-wrap { width: 100%;}</style></body></html>
×
×
  • 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