Inline-block как замена float / Хабрахабр


6 декабря 2012 в 07:31

Inline-block как замена float

Полгода назад я делал перевод статьи на Хабре Подробно о свойстве float. В этот раз взглянем на него немного под другим углом. При разработке сайта мы часто используем float'ы для позиционирования некоторых блоков на странице, например сайдабара. Но так ли это необходимо?



Float не всегда удобен: например при верстке сетки с изображением. Иногда уместно применять inline-block, который имитирует поведение float'а.


Что такое inline-block?



Обычная структура блочного элемента:







Inline-block — это значение, которые можно назначить свойству display. Название происходит от некоторых характеристик как строчного, так и блочного элементов. 


  • Блочные (block) элементы имеют высоту, ширину, padding, margin, border, а также располагаются вертикально, друг под другом.
  • Строчные (inline) элементы располагаются горизонтально, друг за другом.
  • Элементы inline-block обладают характеристиками как блочных, так и строчных элементов.




Inline block vs float: отличия






  • В отличие от float'а, inline-block находится в document flow — «потоке документа», поэтому нет необходимости применять clearfix или overflow: hidden. 
  • Очевидно, что float невозможно позиционировать по центру с помощью text-align: center.
  • Inline-block по умолчанию выравнивается по базовой линии, а float — по верхнему краю.
  • Если на странице несколько inline-block'ов, каждый из которых расположен с новой строки, то между ними будут некоторые промежутки.
  • Inline-block не поддерживается или поддерживается частично в IE6 и IE7





Посмотреть демонстрацию



Для борьбы с промежутками можно использовать несколько техник. Удаление пробелов в списках:


<ul>
  <li>
   one</li><li>
   two</li><li>
   three</li></ul>





Использование отрицательного значения margin:


nav a {
  display: inline-block;
  margin-right: -4px;}





Странный способ с отсутствием закрывающего тега LI:


<ul>
  <li>one
  <li>two
  <li>three
</ul>





Установка значения font-size на ноль:


nav {
  font-size: 0;}nav a {
  font-size: 16px;}





Более подробно об этих способах можно прочитать в статье CSS-tricks.


Что использовать?



Выбор между inline-block и float необходимо делать, исходя из решаемых задач в конкретном дизайне. В итоге все сводится к отличиям этих двух инструментов:


  • Используйте inline-block, если в большей степени необходим контроль над вертикальным выравниванием и горизонтальным позиционированием элементов.
  • Используйте float, если необходимо обтекание элементов, а также поддержка старыми браузерами, и не хочется возиться с проблемой пустых пространств между блоками.




Сетка изображений



Такие сетки используются в фотогалереях. На этом примере можно хорошо проиллюстрировать поведение inline-block и float. Использование float оправдано, если изображения имеют одинаковую высоту. Если же высота отличается, то элементы могут отображаться криво:







Inline-block'и не имеют такой проблемы, потому что располагаются на одном уровне в строке. Поэтому для верстки галереи лучше подойдет inline-block:







Посмотреть демонстацию


Вывод



Мы привыкли к использованию float для решения многих задач при верстке страниц. Однако иногда проще и удобнее применять inline-block. А иногда правильнее использовать старые добрые таблицы.



Использованные материалы и полезные ссылки по теме:


 
 

+41

 

 
42974
615
grokru 199,5
 
 
 

комментарии (81)

 

   

+8
 

LastDragon,

6 декабря 2012 в 09:16 (комментарий был изменён)

#  

 
 
> Странный способ с отсутствием закрывающего тега LI:



Только для тех кто не читал спецификацию HTML — для некоторых тегов закрывающий тег необязателен (к XHTML это не относится).



> Более подробно об этих способах можно прочитать в статье CSS-tricks.



habrahabr.ru/post/138501/

habrahabr.ru/post/137582/

(возможно еще что-то было)
 
 

   

–1
 

Softlink,

6 декабря 2012 в 10:11

#

 

 
 

none

для некоторых тегов закрывающий тег необязателен



Этой «особенностью» я бы пользовался в самом последнем случае, ибо вот jsfiddle.net/Softlink/YYwsd/

 
 

   

+5
 

LastDragon,

6 декабря 2012 в 10:26

#

 

 
 
А div к ним не относится 🙂 (http://www.w3.org/TR/REC-html40/index/elements.html, для html5 не нашел сходу ссылку)
 
 

   

+5
 

Softlink,

6 декабря 2012 в 10:43

#

 

 
 
Да, точно.

Но все равно, как-то не по себе от незакрытых тегов 🙂
 
 

   

+11
 

yurik417,

6 декабря 2012 в 12:18

#

 

 
 
Крепитесь
 
 

   

0
 

SelenIT2,

6 декабря 2012 в 10:55

#

 

 
 
 
 

   

0
 

Softlink,

6 декабря 2012 в 11:14 (комментарий был изменён)

#

 

 
 
Раз уж тему подняли эту. Решил побаловаться немного.

По какому алгоритму закрываются дивы?

Вот одна ситуация jsfiddle.net/Softlink/4kybd/ див сам закрылся.

Вот вторая(производная от самого первого примера) jsfiddle.net/Softlink/6jRYy/

Вложенные дивы вложились друг в друга и закрылись тоже. Получается, встретив любой элемент, он «понимает», что закрываться прямо сейчас не надо и дальше по лесенке до последнего элемента? Так?
 
 

   

+3
 

SelenIT2,

6 декабря 2012 в 12:03

#

 

 
 
У div самая всеядная «content model», он может содержать любой «flow content» без ограничений, поэтому ситуации неявного закрытия для него не предусмотрено. Поэтому парсер, встретив открывающий <div>, без лишних раздумий создает элемент DIV и делает его дочерним для текущего элемента.



«Content-model» li не допускает нахождения другого li непосредственно в нем, поэтому парсер, встречая новый открывающий <li> и создавая новый элемент LI, делает его не дочерним для предыдущего (текущего открытого) LI, а соседним.



Насколько я понимаю, такие исключения (когда новый элемент делается не дочерним, либо когда перед элементом добавляется обязательная прослойка типа TBODY) явно прописаны в алгоритме парсинга. Но если помнить о назначении и «content model»-и элементов, это достаточно логично.
 
 

   

0
 

Genome_X,

6 декабря 2012 в 09:17

#  

 
 
Инлайн блок вообще хорош, держится практически всеми браузерами, исключение — IE7, но с некоторых пор я пактически забил на него. К тому же, если очень нужно, всегда можно использовать Conditional Comments специально для этой версии. Так что да, не вижу ни одной причины почему бы не использовать это удобное свойство. А с флоатами часто возникают проблемы.
 
 

   

0
 

StopDesign,

6 декабря 2012 в 09:49

#

 

 
 
Посмотрел статистику. IE7 — 1.6%. Я бы тоже забил.
 
 

   

+3
 

hermit931,

6 декабря 2012 в 10:37

#

 

 
 
инлайн-блок лучше смотрится в ІЕ7 чем в ІЕ6, но я согласен — пора забивать на 7мую версию. Хорошо что она легче сдается предыдущей версии )
 
 

   

0
 

SelenIT2,

6 декабря 2012 в 11:01

#

 

 
 
Для изначально инлайновых элементов (типа span, a и т.п.) инлайн-блоки в IE6-7 работают без хаков. Простейшее горизонтальное меню из обычных ссылок, не списком, сделать можно:)
 
 

   

+1
 

Genome_X,

6 декабря 2012 в 11:05 (комментарий был изменён)

#

 

 
 
Это я знаю, прелесть инлайн-блоков несколько в другом 🙂 В частности, когда нужно выстроить в линию именно блоки, с заданными высотой и шириной, бэкраундами и т.д. Стандартно раньше использовался для этого float: left к примеру, сейчас все проще: inline-block
 
 

   

0
 

SelenIT2,

6 декабря 2012 в 12:14

#

 

 
 
Я про то же самое, просто уточняю, что для span и ему подобных display: inline-block в IE7- не требует хака с layout-ом.
 
 

   

0
 

Genome_X,

6 декабря 2012 в 11:04 (комментарий был изменён)

#

 

 
 
К слову, забыл сказать, в том же 7-й версии IE inline-block прекрасно эмулируется в случае такой необходимости всего двумя строчками:


li {
  zoom: 1;
  display: inline;}


 
 

   

0
 

SelenIT2,

6 декабря 2012 в 12:05

#

 

 
 
Только вертикальное выравнивание с такой эмуляцией работает слегка иначе, чем с нативным.
 
 

   

+2
 

hermit931,

6 декабря 2012 в 09:31 (комментарий был изменён)

#  

 
 
Флоат для сайдбара удобен тем, что если правильно все оформить, то убирая его, остальная часть контента будет автоматически на всю ширину.

Есть еще способ для списков

  • one
  • two
  • three





Так же убираются пробелы, а запрограммировать такое мне кажется проще

 
 

   

+1
 

hermit931,

6 декабря 2012 в 09:54 (комментарий был изменён)

#

 

 
 
блин, редактор схавал код

[ul]<|—

—>[li]one[li]<|—

—>[li]two[li]<|—

—>[ul]



тоесть использовать коментарии
 
 

   

0
 

Scrum,

6 декабря 2012 в 10:46

#

 

 
 
Еще как способ расположить li элементы в одну строку [li]exampl1[/li][li]exampl[/li]
 
 

   

0
 

hermit931,

6 декабря 2012 в 10:56

#

 

 
 
Это наверное самый простой способ, для программирования. На этапе верстки сложнее читать, но тут дело привычки наверное
 
 

   

0
 

torbasow,

6 декабря 2012 в 11:17

#  

 
 

none

Для борьбы с промежутками можно использовать несколько техник.





В общем, хорошего способа нет.

 
 

   

+1
 

SelenIT2,

6 декабря 2012 в 12:04

#

 

 
 
Есть, убрать пробелы из кода 🙂
 
 

   

–1
 

torbasow,

6 декабря 2012 в 12:13

#

 

 
 
Переносы, Вы хотели сказать. Это плохой способ, вредящий читаемости кода.
 
 

   

0
 

SelenIT2,

6 декабря 2012 в 12:19 (комментарий был изменён)

#

 

 
 
Переносы — частный случай пробельного символа. Кстати, они засоряют DOM ненужными и несемантичными текстовыми нодами:)

<ul>
   <li>
      <p>...</p>
      ...
      <p>...</p>
   </li><li>
      <p>...</p>
      ...
      <p>...</p>
   </li><li>
   ...
   </li>
</ul>



Конечно, компромисс, но, по-моему, вред читабельности минимален в сравнении с кучей нелогичных и ничего не гарантирующих лишних сущностей в CSS. И вообще сейчас такие повторяющиеся структуры, как правило, генерируются, и вся цена вопроса — один раз настроить шаблонизатор…

 
 

   

0
 

torbasow,

6 декабря 2012 в 12:44

#

 

 
 
Во-от, а хочется хорошего способа, бескомпромиссного.
 
 

   

0
 

VolCh,

6 декабря 2012 в 13:07

#

 

 
 
Может мой понравится 🙂
 
 

   

+1
 

torbasow,

6 декабря 2012 в 14:18

#

 

 
 
Не просто не понравится, а совершенно неприемлем. У меня всегда XHTML.
 
 

НЛО прилетело и опубликовало эту надпись здесь
 

   

0
 

torbasow,

6 декабря 2012 в 15:46

#

 

 
 
Во-первых, аккуратности ради, во-вторых, XSLT.
 
 

   

0
 

hermit931,

6 декабря 2012 в 19:52

#

 

 
 
а вариант с комментариями не подходит? код остается вполне читабельным
 
 

   

0
 

torbasow,

7 декабря 2012 в 06:43

#

 

 
 
Ага, а потом кто-нибудь в затмении увидит пустые комментарии и на автомате поудаляет, как мусор. И работоспособность кода нарушится.
 
 

   

0
 

hermit931,

7 декабря 2012 в 17:54

#

 

 
 
А чего это кто-то должен удалять чужие строки? пусть свои удаляет 🙂 Ну можно и комментарий оставить, что удалять ни-ни
 
 

   

0
 

VolCh,

6 декабря 2012 в 20:25

#

 

 
 
Не знаю как вы пользуетесь XSLT, но в моих юзкейсах почти всё равно что на вход подаётся кроме самого XSLT-кода. Это может быть valid XML, well formed XML или IE-6 only HTML.
 
 

   

0
 

torbasow,

7 декабря 2012 в 06:42

#

 

 
 
Не правильно сформированный XML на входе XSLT-шаблона? Или на выходе?
 
 

   

0
 

VolCh,

6 декабря 2012 в 20:20

#

 

 
 
Года два назад и я таки был 🙂
 
 

   

0
 

SelenIT2,

6 декабря 2012 в 13:43

#

 

 
 
Оставлять пробелы — тоже компромисс (нелогичность DOM:).
 
 

   

+1
 

zorro1211,

6 декабря 2012 в 18:01

#

 

 
 
Вы не это ищите?
 
 

   

0
 

SelenIT2,

6 декабря 2012 в 18:11

#

 

 
 
Да, это самое приятное и безопасное… извращение:)
 
 

   

0
 

zorro1211,

6 декабря 2012 в 18:35

#

 

 
 
Ничего, соблазн его использовать со временем ослабнет =)
 
 

   

0
 

torbasow,

7 декабря 2012 в 06:45

#

 

 
 
Неплохой вариант, а на IE8 я могу себе позволить забить… Только наследование гарнитуры нарушится, так же как в варианте с нулевым фонтсайзом — наследование кегля.
 
 

   

0
 

zorro1211,

7 декабря 2012 в 07:29

#

 

 
 
Ну да, font-family придется восстановить. Я для этого использую scss переменную $mainFont. Она сразу и базовый шрифт задает и помогает в этом случае. Не 100% универсально, но меня вполне устраивает.
 
 

   

0
 

torbasow,

7 декабря 2012 в 08:56

#

 

 
 
Но тогда можно и нулевой фонтсайз использовать, даже и проще.
 
 

   

0
 

aTei,

7 декабря 2012 в 19:03

#

 

 
 
А ещё можно использовать rem (root em), вполне удобно.
 
 

   

0
 

VolCh,

6 декабря 2012 в 13:06

#

 

 
 
С некоторых пор предпочитаю нечто вроде

<ul><li><p>...
        ...
        <p>...
    <li><p>...
        ...
        <p>...
    <li>...
</ul>



В крайнем случае (при активном использовании атрибутов)

<ul>
    <li>
        <p>
           ...
        ...
        <p>
           ...
    <li>
        <p>
           ...
        ...
        <p>
           ...
    <li>
        ...
</ul>





Если закрывающие теги optional, то зачем их писать? а структуру показываю отступами.

 
 

НЛО прилетело и опубликовало эту надпись здесь
 

   

0
 

spbcypher,

6 декабря 2012 в 11:59

#  

 
 

 
 

   

+1
 

muradovm,

6 декабря 2012 в 12:14

#  

 
 
Эх, где ж вы были вчера…
 
 

   

0
 

KeepYourMind,

6 декабря 2012 в 12:41

#  

 
 
Во множестве шаблонизаторов, по крайней мере в PHP, есть удаление пробелов. Например в twig.
 
 

   

+7
 

Aingis,

6 декабря 2012 в 14:29

#  

 
 
М-да, посты grokru просто нельзя пройти мимо. Просто сборник неточностей, недоговоренностей, плохих примеров и устаревших сведений.

Опустим описание недостатков флоатов. Почему-то о них написано только в конце, а не в начале.

none

Обычная структура блочного элемента:

А что, есть необычная структура? Что означают буквенные сочетания на картинке?

none

Блочные (block) элементы имеют высоту, ширину, padding, margin, border, а также располагаются вертикально, друг под другом.

А строчные не имеют высоту, ширину, padding, margin, border?

none

Элементы inline-block обладают характеристиками как блочных, так и строчных элементов.

Ещё бы указать какие.

none

Для борьбы с промежутками можно использовать несколько техник.

С какими промежутками? Для тех, что между строк, и о которых говорилось ранее, достаточно поменять vertical-align.

none

Странный способ с отсутствием закрывающего тега LI:

Здесь всё сказали, закрывающий тег </li> — необязательный.

Пропущен способ с комментариями:

<ul>
    <li>one</li><!--
 --><li>two</li><!--
 --><li>three</li></ul>



Жаль, не всегда шаблонизаторы позволяют использовать техники с HTML-кодом.

none

Установка значения font-size на ноль:

Проглючит, если в браузере задан минимальный размер шрифта: в Опере, некоторых версиях Сафари, может быть и в других браузерах поставлен пользователем.

none

Вывод

Мы привыкли к использованию float для решения многих задач при верстке страниц. Однако иногда проще и удобнее применять inline-block. А иногда правильнее использовать старые добрые таблицы.

Кэп!

 
 

   

+2
 

timonstr,

6 декабря 2012 в 20:50

#

 

 
 
Большинство постов уважаемого grokru не его — а такой себе микс переведенных статей. Несомненно, его труд заслуживает уважения, но в конечном итоге практическая ценность таких постов не слишком велика.

Я ни в коем случае не хочу обидеть автора поста, более того, я благодарен за многие интересные статьи, но, мне кажется, что стоит лучше разбираться в том, о чем рассказывается в посте. И поддерживать общение в комментариях тоже было бы неплохо.
 
 

   

0
 

grokru,

6 декабря 2012 в 21:09

#

 

 
 
Вы правы. Обычно тема поста приходит на ум при решении какой-то практической задачи. Начинаю гуглить — нахожу интересные статьи, все они обычно расположены в англоязычных блогах. Я всегда даю ссылки на источники, а также на другие интересные сайты по теме. Многие авторы этого не делают, выдавая легкий рерайт-перевод за уникальный контент.



А в обсуждениях участвую редко из-за нежелания разводить холивары. Внимательно отношусь к критике, отзывам и замечаниям в личке, Комментарии иногда бывают конструктивны, но это скорее исключение, чем правило.
 
 

   

+1
 

psywalker,

7 декабря 2012 в 13:23

#

 

 
 
Пользуясь случаем, тоже хотелось бы сказать пару слов grokru. Выскажу чисто своё имхо.



grokru, я конечно понимаю, что, накатав быстрый пост на хабре, ты получишь новую карму, попиаришь свой сайт + продашь новые инвайты, как ты обычно делаешь. Но как бы ок, проблем нет, это твои дела, НО, почему бы тогда думать не только о себе, но ещё и о тех, кто будет читать твои посты?



Я просто к тому, что я не против твоего бизнеса, но, имхо, о качестве продуктов и их пользователях тоже нужно заботиться.



Почему я считаю, что тебе плевать? Всё просто. Во-первых, я читаю твои посты, в которых всегда куча неточностей: несоответствие спецификациям, важная недосказанность и т.д. Во-вторых, тебе абсолютно пофиг даже на то, что тебе пишут в комментариях. Ты никогда не исправляешь ошибки, на которые тебе указывают, показывая тем самым своё наплевательское отношение ко всем. И это касается не только твоих личных постов, но и переводов. В общем, всех твоих постов.



Я лично не вижу в твоих постах цели поделиться с народом знаниями и заинтересованности в самой теме, я вижу лишь взгрев с хабра-стада, ссори, но говорю как вижу.



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


 
 

   

+1
 

SelenIT2,

7 декабря 2012 в 16:24

#

 

 
 

none

А строчные не имеют высоту, ширину, padding, margin, border?

Кстати, высоту и ширину, как ни странно, в общем случае не имеют:)

 
 

   

0
 

Aingis,

7 декабря 2012 в 16:26

#

 

 
 
В том-то и дело что имеют. Их задать нельзя. А так прямоугольные блоки, о которых говорится в блочной модели имеют весь наоборот характеристик.
 
 

   

0
 

SelenIT2,

7 декабря 2012 в 16:42

#

 

 
 
Прямоугольные «boxex» — да, но в цитате вроде речь об элементах?
 
 

   

–1
 

Aingis,

7 декабря 2012 в 16:42

#

 

 
 
Нет, там намешано.
 
 

   

0
 

SelenIT2,

7 декабря 2012 в 16:50

#

 

 
 
Понятно, что «автор имел в виду другое», но в статье стоит буквально «Блочные (block) элементы имеют … Строчные (inline) элементы располагаются …» и т.д. А у элементов с display:inline нет ширины и высоты, и вообще «boxes» может быть несколько 🙂
 
 

   

0
 

Aingis,

7 декабря 2012 в 16:51

#

 

 
 
Но «boxes» же имеют размеры, раз существуют.
 
 

   

0
 

SelenIT2,

7 декабря 2012 в 17:01 (комментарий был изменён)

#

 

 
 
А элемент? Состоящий из нескольких «boxes», возможно, в разных колонках?
 
 

   

0
 

Aingis,

7 декабря 2012 в 17:01 (комментарий был изменён)

#

 

 
 
А элемент состоит из одного или нескольких прямоугольных блоков aka boxes (если только не скрыт посредством display:none).
 
 

   

0
 

SelenIT2,

7 декабря 2012 в 17:06

#

 

 
 
И что считать его размерами в случае нескольких? 😉
 
 

   

–1
 

Aingis,

7 декабря 2012 в 17:08

#

 

 
 
А что необходимо узнать? См. CSSOM, getComputedStyle() и getBoundingClientRect()
 
 

   

0
 

SelenIT2,

7 декабря 2012 в 17:19

#

 

 
 
Например, размер дочернего элемента с position: absolute; width: 100%; height: 100% (если у самого inline-элемента стоит position:relative)?
 
 

   

–1
 

Aingis,

7 декабря 2012 в 17:23

#

 

 
 
Разве такая постановка задачи имеет смысл?
 
 

   

0
 

SelenIT2,

7 декабря 2012 в 17:39

#

 

 
 
Если считать, что у инлайнового элемента есть размеры, то почему бы нет? 😉
 
 

   

0
 

Aingis,

7 декабря 2012 в 17:40

#

 

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

   

0
 

SelenIT2,

7 декабря 2012 в 17:47

#

 

 
 
 
 

   

–1
 

aTei,

7 декабря 2012 в 19:13

#

 

 
 
> в Опере, некоторых версиях Сафари, может быть и в других браузерах поставлен пользователем.



Не знал, спасибо за информацию.
 
 

   

–1
 

Aingis,

7 декабря 2012 в 19:25

#

 

 
 
Пожалуйста, для того и комментарии.
 
 

   

+1
 

Matrosked,

6 декабря 2012 в 19:57 (комментарий был изменён)

#  

 
 
ооох, примеры «Для борьбы с промежутками » частично безрадостны).



1. «Использование отрицательного значения margin:»



— только отступы между блоками зависят от размера текста, и что у вас 4px, то у другого 8px (см. системное увеличение размера шрифта, например)



2. «Странный способ с отсутствием закрывающего тега LI»



— далеко не всегда удобно и нужно держать контент в списках (в идеале, то что выглядит как список — должно быть с делано списком, табличные данные — таблицей и т.п.), и если для li закрывающий тэг не обязателен, то в случае с дивами такой способ не прокатит.



3. «Установка значения font-size на ноль:»



— если работаете с em-ами, можете забыть об этом решении



4. «Удаление пробелов в списках»



— я бы назвал самым здоровым из всехх предложенных решений, но пример, конечно, кривоват. Гораздо нагляднее в коде будет выглядеть:


.test-div{
  display: inline-block;}




   <div class="test-div">контент</div><!--
--><div class="test-div">контент</div><!--
--><div class="test-div">контент</div><!--
--><div class="test-div">контент</div>





Так вы хотя бы не будете ломать глаза, «кто на ком стоял» — что с чем и на каком уровне лежит.

 
 

   

+1
 

aTei,

7 декабря 2012 в 19:18

#

 

 
 
> если работаете с em-ами, можете забыть об этом решении



Rem (root em) от этого спасает. Не работает только в очень старых браузерах caniuse.com/rem
 
 

   

0
 

Matrosked,

8 декабря 2012 в 02:14

#

 

 
 
Как раз сегодня уже давал комментарий по этому вопросу в другой теме). От этого и «px» спасает ;).



Как показывает практика, большинство наших клиентов (РФ + Европа) настаивают на поддержке того же IE, начиная с версии 8. И если с квадратными углами и отсутствием теней клиент, как правило, готов мириться, то с простыней одним кегелем — уже никак.

Поверьте, я только за использование rem, и жду не дождусь, пока пожилые версии IE канут в лету, но суровые реалии таковы, что пока для этого немного рановато.



Да и вцелом, об этом способе борьбы с отступами: использование общего правила для решения частной ситуации — плохая практика, действие по принципу «сначала создаем проблему, а потом ее решаем».
 
 

   

0
 

s0rr0w,

6 декабря 2012 в 23:55

#  

 
 

none

Inline-block по умолчанию выравнивается по базовой линии, а float — по верхнему краю.



По какому-такому верхнему краю? Далеко не факт.

 
 

   

0
 

s0rr0w,

7 декабря 2012 в 01:26

#

 

 
 
Удивительный float

Всегда есть нюансы.
 
 

   

0
 

SelenIT2,

7 декабря 2012 в 16:25

#

 

 
 
Вопрос, есть ли хоть одна реализация этих нюансов, пусть даже экспериментальная?
 
 

   

+1
 

s0rr0w,

7 декабря 2012 в 18:59

#

 

 
 
Это не важно, мы живем в эру постоянно мигрирующих стандартов, поэтому нужно помнить, что знания, которые были получены в прошлом, не факт что будут работать в будущем. Кстати, помнится был драфт мультиколочного текста, при котором флоат мог принимать значение fr и располагаться между колонок. А еще нужно держать в голове, что для монгольского языка лево и право может быть далеко не слева и справа.


 
 

   

0
 

Aingis,

7 декабря 2012 в 19:27

#

 

 
 
Для флоатов и подобных свойств право right и лево left именно визуальные. Если будет учитываться параметры вроде направления письма, то они будут особые значения вроде start и end.
 
 

   

0
 

spbcypher,

7 декабря 2012 в 00:46

#  

 
 
из профиля

>> хабраюзерам-новичкам дам совет по подготовке и оформлению топика.



are you serious? судя по качеству публикуемых вами материалов… я бы посоветовал новичкам обойтись без вашего совета.



статус вконтактика

>> хабраюзер #1



а вот тут все встает на свои места — как я предположил ранее, в посте который вы поспешно убрали в черновики (волнение за карму?), вы набиваете счетчик. Что же… меня это не очень удивляет. Меня поражает то, что пипл хавает. Неужели в сфере веб-разработки все так плохо? Хотя… с другой стороны, чем больше неучей — тем я ценнее как специалист, так что дерзайте )
 
 

   

0
 

ZUGA,

7 декабря 2012 в 15:37

#  

 
 
Также для борьбы с промежутками можно использовать letter-spacing: -4px; но не работает в Safari.

Очен правельно отметил Matrosked, что 4 пикселя у большенства и зависит от размера шрифта. Вообще не стоит разчитывать на них!

Самый лучший способ — создовать HTML в котором отсутсвуeет whitespace между тагами.
 
 

   

0
 

stagnantice,

13 февраля 2013 в 17:36

#  

 
 
Пока есть IE7, лучше пользоваться float. Но иногда другого выхода просто нет.
 

Только зарегистрированные пользователи могут оставлять комментарии. Войдите, пожалуйста.

 
Лучшее за 24 часа
Похожие посты
Вопросы по теме
Что обсуждают?
 
Компания дня