Report

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


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


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


а вдругих браузерах сразу корректно отобразится
 
что думаете на сей счет ?
 
такой косяк с отступом проявляется только с псевдоэлементом inline-block и только в хром с большущим подозрением именно 61 версией...

Всем здравствуйте! Столкнулся с проблемой и никак не могу найти рабочее решение. Помогите неучу, пожалуйста! Вот ссылка на 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. Что-же задают тогда эти пиксели в размере шрифта?

Здравствуйте! 

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

Получается верстка с помощью свойства display не подходит для резиновых шрифтов или всё-таки есть какие-то способы? 

Нужно расположить блоки, как на макете. Сделал блоки, присвоил им inline-block и 2 строка началась на уровне высокого блока, который должен занимать 2 строки. Что с этим делать?

Здравствуйте! Помогите пожалуйста. Совмещаю 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>