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.

При дефолтном шрифте в 16 px, между блоками inline-block 4px отступа. Имеем такую верстку: Результат в хром версии 61: Отступа между псевдоэлементов before - inline-block который у нас в ширину в 1px и и первым блоком нету, но отступ должен быть! но если в хроме, в панели разработчиков, в DOM, у псевдоэлемента before выключить display: inline-block и включить, то станет нормально отображаться, попробуйте) пример: а вдругих браузерах сразу корректно отобразится что думаете на сей счет ? такой косяк с отступом проявляется только с псевдоэлементом inline-block и только в хром с большущим подозрением именно 61 версией...

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

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

помогите пожалуйста растянуть правый внутренний inline-block до конца строки http://plnkr.co/edit/Pug0TBbVWjF0wEkYpcT9?p=preview есть такой вариант, но в этом случае перестает работать vertical-align: middle http://plnkr.co/edit/q69ycAxFC3yx2k2nTlbQ?p=preview

Доброго времени суток уважаемые форумчане. Недавно начала изучать html/CSS. И при освоении новой порции знаний натолкнулась на эффект который не могу объяснить. А именно. При добавлении в div контейнер содержимого столкнулась с эффектом вылетания div контейнера из общего ряда элементов структурированных с помощью display:inline-block;. И теперь что это такое и как с этим бороться непонятно. Буду премного благодарна если дадите какие-нибудь комментарии по этому поводу. Код можете посмотреть по ссылке: http://cssdeck.com/labs/nz39zp35 Ксения.

http://jsfiddle.net/Launder/d70c2kg1/4/ <ul class="menu"> <li><a href="#">Разные вкусности</a> <ul> <li><a href="#">Суп с клёцками</a></li> <li><a href="#">Пироги с капустой и яйцом</a></li> <li><a href="#">Торт Медовый</a></li> </ul> </li> <li><a href="#">Узбекская кухня</a> <ul> <li><a href="#">Плов по-бухарски с изюмом</a></li> <li><a href="#">Плов с бараниной и нутом</a></li> <li><a href="#">Халва из ядрышек урюка</a></li> <li><a href="#">Лагман по-хорезмски</a></li> </ul> </li> <li><a href="#">Итальянская кухня</a> <ul> <li><a href="#">Феттучини с ветчиной и грибами в сливочном соусе</a></li> <li><a href="#">Пицца по-тоскански с индейкой и грейпфрутом</a></li> <li><a href="#">Кролик по-лигурийски с красным вином</a></li> <li><a href="#">Миндальные бискотти с медом</a></li> </ul> </li></ul>.menu { background: -moz-linear-gradient(to top, #ecc, #fff8f8); background: -webkit-linear-gradient(to top, #ecc, #fff8f8); background: -o-linear-gradient(to top, #ecc, #fff8f8); background: -ms-linear-gradient(to top, #ecc, #fff8f8); background: linear-gradient(to top, #ecc, #fff8f8); border: 1px solid #888; border-top: 0; padding: 0; margin: 0; font-family: Arial, Helvetica, sans-serif; font-size: 0; }.menu > li { display: inline-block; width: 200px; height: 75px; border: 1px solid #fff; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; font-size: 14px; position: relative; }.menu a { text-decoration: none; display: block; }.menu ul { list-style: none; }.menu > li:hover::after { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; -webkit-box-shadow: inset 0 0 10px #777; -moz-box-shadow: inset 0 0 10px #777; box-shadow: inset 0 0 10px #777; }Почему элемент ul, который является составной частью inline-block элемента li, выходит за его границы, а не растягивает его? Я это говорю, потому что вижу, что выделяет тень (при наведении на блок). С другой стороны, inline-block-и, как и должны, выстроились по базовой линии самой нижней строчки текста в них. Значит, всё же, они "чувствуют" вложенный список. Как объяснить такое двойное поведение?

http://jsfiddle.net/Launder/38femeh7/2/ <ul class="menu"> <li><a href="#">Русская кухня</a> <ul> <li><a href="#">Филе рябчика фаршированное в сухарях </a></li> <li><a href="#">Заливной пирог с картофелем и белыми грибами</a></li> <li><a href="#">Щи суточные с расстегайчиками</a></li> </ul> </li> <li><a href="#">Украинская кухня</a> <ul> <li><a href="#">Борщ украинский с пампушками</a></li> <li><a href="#">Вареники с печенью в луке с салом</a></li> <li><a href="#">Курица, тушенная с галушками</a></li> </ul> </li> <li><a href="#">Немецкая кухня</a> <ul> <li><a href="#">Гусь по-берлински</a></li> <li><a href="#">Пирог яблочный с грецкими орехами</a></li> <li><a href="#">Cвиные отбивные под лимонно-соевым соусом</a></li> </ul> </li></ul>.menu { background: -moz-linear-gradient(to top, #ecc, #fff8f8); background: -webkit-linear-gradient(to top, #ecc, #fff8f8); background: -o-linear-gradient(to top, #ecc, #fff8f8); background: -ms-linear-gradient(to top, #ecc, #fff8f8); background: linear-gradient(to top, #ecc, #fff8f8); border: 1px solid #888; border-top: 0; padding: 0; margin: 0; font-family: Arial, Helvetica, sans-serif; font-size: 0; }.menu > li { display: inline-block; border: 1px solid #fff; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; font-size: 14px; }.menu a { text-decoration: none; display: block; }.menu ul { list-style: none; }Почему когда ставишь .menu a {display: block}, а, как блочный элемент, с не заданной шириной, не растягивает li, который является inline-блоком и, по-идее, его размеры должны определяться размерами внутренних элементов?

Тут пример: http://jsfiddle.net/yaoev48n/ Суть - есть инлайн-блок элемент, добавляем ему max-width (чтобы получить перенос строки внутри текста) и получаем такую штуку как в примере - инлайн блок обрезается справа не сразу по тексту а как бы "тянется" до max-width. Если между словами вставить разрыв строки <br> - http://jsfiddle.net/qh0znfb0/ то получим то что нужно - блок обрезается справа ровно по словам. Как можно добиться такого результата без использования <br> ?

Всем привет! Подскажите, пожалуйста, почему может не работать float или display:inline-block? Т.е. они как бы работают. Верхние и нижние границы между элементами схлопываются, но по горизонтали не выстраиваются.

В Chrome и Opera не работает text-align: justify, если на странице есть форма и стили при этом находятся во внешнем файле (jsfiddle не подходит). Нормально выравниваются те элементы, стиль которых определен прямо в HTML-коде с помощью атрибуте style. Если удалить селекты или форму целиком - все работает нормально. <!doctype html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <link rel="stylesheet" href="style.css"></head><body> <form action="action"> <fieldset> <input type="text" name="id00" id="id01"> <select name="id02" id="id03"> <option value="1">1</option> </select> <select name="id04" id="id05"> <option value="1">1</option> </select> </fieldset> </form> <div class="parent"> <div class="child">1</div> <div class="child">2</div> <div class="child" style="display: inline-block">3</div> <div class="child" style="display: inline-block">4</div> </div></body></html>.parent { width: 500px; text-align: justify; }.parent:after { display: inline-block; visibility: hidden; overflow: hidden; width: 100%; height: 0px; content: ""; } .child { display: inline-block; margin-bottom: 10px; width: 220px; background: orange; }

Здравствуйте. Вот уже несколько лет верстаю разной степени сложности страницы и изучаю различные приемы и методы. Но до сих пор не нашел для себя действительно удобного, идеального метода выравнивания блочных элементов по горизонтали. О чем, собственно, речь. Есть какой-то макет с кучей элементов. И некоторые элементы надо расположить на одной линии по горизонтали, вписав в какой-нибудь фиксированный контейнер. Итак, какие есть способы сверстать такой "макет"? 1. Старые добрые таблицы. Думаю, не нужно объяснять, что "таблицы для табличных данных", и вообще, поддерживать более-менее сложный макет, сверстанный таблицами — очень муторно. 2. Способ классический. Использовать float: left/right. Код: <!doctype html> <html> <head> <title>Способ классический: float</title> <meta http-equiv='content-type' content='text/html; charset=utf-8'> <style> #container{ border:1px solid #c3c3c3; padding:40px 0; width:400px; } .block{ background:#c3c3c3; float:left; text-align:center; } #block-1{ margin:0 16px 0 15px; width:99px; } #block-2{ margin-right:16px; width:59px; } #block-3{ width:180px; } </style> </head> <body> <section id='container'> <div class='block' id='block-1'>1</div> <div class='block' id='block-2'>2</div> <div class='block' id='block-3'>3</div> </section> </body> </html> Плюсы: кроссбраузерно. Минусы: если нужно вставить элемент ниже, то нужно применять clear:both. А когда макет действительно сложный, становится слишком много усложнений - конструкция превращается в монструозную. если высота элементов не фиксированная, то в достаточно типичных макетах случаются разные неприятности (http://habrahabr.ru/post/117109/ - 3 абзац) 3. "Все правильные ребята уже давно прочитали статью в блоге Мозиллы" (с) Сергей Чикуёнок. Речь о display: inline-block, конечно же. Способ почти идеальный. Если честно, я предпочитаю именно его, но тут есть свои заморочки. Блок, отмеченный как inline-block, ведет себя как блочный, но если ему указать ширину, то спокойно встает в одну линию с другими элементами. Перепишу стили для примера выше (разметку не трогаю): <!doctype html> <html> <head> <title>Способ правильный: inline-block</title> <meta http-equiv='content-type' content='text/html; charset=utf-8'> <style> #container{ border:1px solid #c3c3c3; padding:40px 0; width:400px; } .block{ background:#c3c3c3; /*float:left; Это убрали */ display:inline-block; /* Это добавили */ text-align:center; } #block-1{ margin:0 16px 0 15px; width:99px; } #block-2{ margin-right:16px; width:59px; } #block-3{ width:180px; } </style> </head> <body> <section id='container'> <div class='block' id='block-1'>1</div> <div class='block' id='block-2'>2</div> <div class='block' id='block-3'>3</div> </section> </body> </html> Взгляните на скриншот, что у нас получилось: (Я использую Firebug для подсветки элементов на странице) Обратите внимание на зеленые стрелки: первая указывает на зазор в 4 пикселя между inline-block-элементами. Вторая указывает на последствие - из-за этих зазоров уменьшилось расстояние до правой границы контейнера. А если бы контейнер был более узким, то элемент "3" был бы перенесен на следующую линию, несмотря на то, что ширина элементов не менялась. Как с этим бороться: 1. Достаточно "вытянуть" в одну строку html-код элементов 1-3 (зазор пропадет) 2. Либо прописывать font-size:0 для контейнера и font-size:%ваше значение% для блоков 1-3 3. Либо использовать для блоков 1-3 margin-right: -0.3em 4. Либо еще какой-нибудь костыль (полный список в комментариях здесь: http://chikuyonok.ru...vertical-align/) 5. Либо "подгонять" margin-ы между элементами. Итак, плюсы: довольно изящное решение, все максимально понятно Минусы: без вытягивания кода или использования костылей отображается браузерами не так, как хотелось бы. 4. Абсолютное позиционирование. Вся соль в использовании position:absolute. Перепишу все тот же несчастный пример (разметку снова не трогаем, меняется только CSS): <!doctype html> <html> <head> <title>Способ pixel-perfect: position:absolute</title> <meta http-equiv='content-type' content='text/html; charset=utf-8'> <style> #container{ border:1px solid #c3c3c3; padding:40px 0; position:relative; /* Добавили */ width:400px; } .block{ background:#c3c3c3; /*float:left; Это убрали */ /*display:inline-block; Это тоже убрали */ position:absolute; /* Добавили */ text-align:center; } #block-1{ /*margin:0 16px 0 15px; Убрали */ left:15px; /* Добавили */ width:99px; } #block-2{ /*margin-right:16px; Убрали */ left:130px; /* Добавили */ width:59px; } #block-3{ left:205px; /* Добавили */ width:180px; } </style> </head> <body> <section id='container'> <div class='block' id='block-1'>1</div> <div class='block' id='block-2'>2</div> <div class='block' id='block-3'>3</div> </section> </body> </html> На этот раз, изменений больше. Способ работает совсем идеально. С точностью до пикселя. Плюсы: получено именно то, чего хотелось, и без костылей. Минусы: без калькулятора не обойтись - на любое изменение одного блока нужно менять и все остальные. элементы страницы ведут себя так, будто абсолютно позиционированных элементов на странице нет, и это иногда не очень классно. 5. Способ прогрессивный. Верстка по настоящей сетке с использованием display:grid. Снова поменяю пример: <!doctype html> <html> <head> <title>Способ прогрессивный: display:grid</title> <meta http-equiv='content-type' content='text/html; charset=utf-8'> <style> #container{ border:1px solid #c3c3c3; display:-ms-grid; /* Добавили */ -ms-grid-columns:15px 99px 16px 59px 16px 180px; /* Добавили */ padding:40px 0; /*position:relative; Убрали */ width:400px; } .block{ background:#c3c3c3; /*float:left; Это убрали */ /*display:inline-block; Это тоже убрали */ /*position:absolute; Убрали */ text-align:center; } #block-1{ /*margin:0 16px 0 15px; Убрали */ /*left:15px; Убрали */ -ms-grid-column:2; /* Добавили */ width:99px; } #block-2{ /*margin-right:16px; Убрали */ /*left:130px; Убрали */ -ms-grid-column:4; /* Добавили */ width:59px; } #block-3{ /*left:205px; Убрали */ -ms-grid-column:6; /* Добавили */ width:180px; } </style> </head> <body> <section id='container'> <div class='block' id='block-1'>1</div> <div class='block' id='block-2'>2</div> <div class='block' id='block-3'>3</div> </section> </body> </html> Вот он, способ моей мечты. Подробно можно почитать на Хабре (http://habrahabr.ru/...ft/blog/140715/). Если вкратце: описываем контейнер как сетку. Каждому элементу назначаем место в этой сетке. И все классно. Но есть существенные минусы: в чистом виде, без префиксов, не работает вообще ни в одном браузере (это еще не стандарт, только черновик) с префиксами работает только в IE 10 и выше Пока что этот способ - в мечтах. Можно, конечно, использовать JS-библиотеки, реализующие поддержку Grid в браузерах (например, http://ecsstender.org/), но это тоже не очень классное решение. Теперь, внимание, знатоки. Что используете вы? Есть ли изящные решения без замусоривания кода? Предлагаю обсудить данный вопрос.

Подумалось тут в развитие старой темы. По сути, используя инлайн-блоки со «скукоженными» пробелами между ними, мы ведь пытаемся эмулировать «новые» флексбоксы (в т.ч. в многострочном режиме — flex-flow: row wrap) с flex: none. И у нас есть надежное средство «скукожить» пробелы везде, кроме вебкита (отриц. word-spacing с запасом), лекарство для старых вебкитов (display: table для контейнера) и... собственно флексбоксы в новых вебкитах (Хром-Канарейка и т.п.) . А также @supports, чтобы все остальные могли перейти со старых костылей на правильный флексбокс, как только смогут сделать это наверняка. Тем самым мы избавляемся от подгонки «магических» значений для двух похожих, но сильно неодинаковых по действию свойств (word-spacing и letter-spacing) и, по идее, получаем решение, с которым история как в ссылке выше уже точно не приключится. Старые костыли будут использоваться только в старых браузерах, где баги/фичи, на которых они основываются, заведомо работают. А новые браузеры будут плавно переходить на стандартное решение, не требующее костылей. Чем не прогрессивное улучшение? Правда, в новых вебкитах (и будущих браузерах) и всём остальном задача решается разными технологиями — но фактическое поведение очень похоже. Причем старая технология, можно сказать, проверена временем, а новая зато специально «заточена» именно для этой задачи. Прошу посмотреть пример (я взял за основу те же YUI Grids, откуда расползлись эти загадочные -.43em) и покритиковать идею и реализацию

Что надо изменить в данной конструкции чтобы время и текст были друг над другом, оба блока растягивались по количеству содержимого, блоки были по центру страницы? Дума, ничего хорошего не надумал. Что я не учёл?