inline-block vs float

[monsterr]

Не мало раз видел советы использовать inline-block вместо float (к примеру, для каталога товаров). Но почему?

Вот, например, есть у меня такая страничка, там каталог с товарами. Следовать друг за другом приказал с помощью float: left, и всё нормально. Способ же с inline-block подразумевает также ещё сброс font-size и line-height для ликвидирования отступов.

[psywalker]

Надо смотреть по ситуации, и там и там есть свои плюсы и минусы. В случае с вёрсткой блоков каталогов возможно лучше inline-block, потому-что вот например http://forum.htmlbook.ru/index.php?showtopic=13589&view=findpost&p=170848

[W1nD]

Не мало раз видел советы использовать inline-block вместо float (к примеру, для каталога товаров). Но почему?

Вот, например, есть у меня такая страничка, там каталог с товарами. Следовать друг за другом приказал с помощью float: left, и всё нормально. Способ же с inline-block подразумевает также ещё сброс font-size и line-height для ликвидирования отступов.

psywalker дал развернутый ответ по этому поводу. от себя добавлю, что борьба с отступами, которые появляются при использование display:inline-block легко происходит, блоку обертке присваиваем font-size:0, а дочерным элементам указываем нужный font-size

[Great Rash]

от себя добавлю, что борьба с отступами, которые появляются при использование display:inline-block легко происходит, блоку обертке присваиваем font-size:0, а дочерным элементам указываем нужный font-size

Не так все просто. Вот так кроссбраузерно:

<!-- HTML -->
<ul>
  <li>inline-block</li>
  <li>inline-block</li>
  <li>inline-block</li>
  <li>inline-block</li>
</ul>

/* CSS */
ul {
  list-style: none;
  letter-spacing: -1px;
  line-height: 0;
  font-size: 0;
}

li {
  letter-spacing: normal;
  line-height: normal;
  font-size: 12px;
  vertical-align: top;
  border: 1px solid;
}

[W1nD]

Не так все просто. Вот так кроссбраузерно:

<!-- HTML -->
<ul>
  <li>inline-block</li>
  <li>inline-block</li>
  <li>inline-block</li>
  <li>inline-block</li>
</ul>

/* CSS */
ul {
  list-style: none;
  letter-spacing: -1px;
  line-height: 0;
  font-size: 0;
}
li {
  letter-spacing: normal;
  line-height: normal;
  font-size: 12px;
  vertical-align: top;
  border: 1px solid;
}

Вполне можно обойтись и без

 letter-spacing: -1px;
 line-height: 0;

для всех современных браузеров работает, и в IE6 - IE8 тоже, поэтому считаю что работает везде.

Назовите мне те браузеры, где без этих свойств будет отступ?

[Great Rash]

Google Chrome и Safari

[W1nD]

Google Chrome и Safari

Пример из Google Chrome

Сейчас установлю специально сафари чтобы убедиться. Если у вас не работает, приложите скрин, или напишите какой версии у вас Google Chrome

ВSafariда, действительно не работает. Поэтому ваш метод универсальный.

Следует обязательно добавлять

 letter-spacing: -1px;
  line-height: 0;

Но я бы не акцентировал внимание на Safari, так как совсем крохотная часть пользователей его использует.

Статистика

Edited April 27, 2011 by W1nD

[Great Rash]

А вы в две строки попробуйте элементы расположить

UPD: Да, оказался не прав, в Хроме пофиксили. Но в Сафари проблема осталась до сих пор.

UPD2: И да, не с line-height, а с letter-spacing.

Но я бы не акцентировал внимание на Safari, так как совсем крохотная часть пользователей его использует.

Все зависит от аудитории сайта. Если это интернет-магазин по продаже, скажем, периферии для макбуков, то доля Safari будет стремиться к 100%.

[klierik]

"вес" правил инлайн блока, если смотреть с точки зрения скорости рендеринга, легче нежели флоат (он требует дополнительных вычислений)

[W1nD]

"вес" правил инлайн блока, если смотреть с точки зрения скорости рендеринга, легче нежели флоат (он требует дополнительных вычислений)

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

[klierik]

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

пока что мой предыдущий пост правильнее назвать имхо.

я бы вес распределил так (от малого к большему):

1. inline, inline-block

2. position: relative

3. float

4. position: absolute/fixed

в такой последовательности правила требуют дополнительных вычислений со стороны браузера.

Но так же хочу повторится, в данный момент у меня нету возможности выложить пруф линк на тест. Надеюсь в скором времени всё разъяснится.

[W1nD]

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

пока что мой предыдущий пост правильнее назвать имхо.

я бы вес распределил так (от малого к большему):

1. inline, inline-block

2. position: relative

3. float

4. position: absolute/fixed

в такой последовательности правила требуют дополнительных вычислений со стороны браузера.

Но так же хочу повторится, в данный момент у меня нету возможности выложить пруф линк на тест. Надеюсь в скором времени всё разъяснится.

Спасибо большое за информацию к размышлению. Будет над чем подумать в свободное время. Как только у вас появиться информацию, поделитесь. Я думаю многим будет интересно

Edited April 27, 2011 by W1nD

[klierik]

Спасибо большое за информацию к размышлению. Будет над чем подумать в свободное время. Как только у вас появиться информацию, поделитесь. Я думаю многим будет интересно

Дождавшись ответа от Николая Мациевского делюсь:

Если использовать position:absolute; в сравнении float:left; то первый вариант будет "легче", так как конкретно задана геометрия элементу страницы. Второй же вариант более абстрактен и требует дополнительных вычислений.

имхо:

Что же касается: inline|block

То, как мне кажется, эти элементы одинаково рендаряться браузером. А свойство position:relativ; не влияет на рэндеринг даже если присутствует left|top|riight|bottom, так как в любом случае заведомо эти значения установлены в CSS и браузеру не требуются дополнительные расчеты.

Так же хочу заметить, эти правила, возможно, будут уместны в больших проектах с огромным DOM деревом на странице, а в мелких хомяках прирост не будет значимым.