Разрыв между блоками при использовании inline-block

css, html

Сегодня мы поговорим об одной проблеме, с которой столкнулся недавно, верстая один из проектов.
Как многие из вас знают, часто бывает такое, что блоки смотрятся не пропорционально. Точнее, приходится постоянно высчитывать размеры блоков, учитывая padding, margin и многое другое. В следствии чего бывает так, что, к примеру, третий блок, оказывается на второй строке, оставляя много свободного места. Приходится все пересчитывать. Но если в статичной верстке это можно сделать без особых проблем, то вот при адаптации этого уже не избежать, так как рано или поздно вы попадёте на разрешение экрана, на котором произойдет описанное выше.

Чтобы обойти данную проблему я нашёл отличный способ, который опишу в одной из следующих статей. Тем не менее. сегодня столкнулся с одной проблемой, над которой не мог разобраться 5 часов. Самое обидное было то, что я просто невнимательно прочитал спецификацию. Тем не менее, проблема была, и нужно было её найти.
Сразу забегу немного вперед, основой принципа верстки одинакового количества блоков является отсутсвие margin и padding в основном контейнере, т.е., основные контейнеры должны должны прилегать друг к другу. Вместо float, который был изначально предназначен для позиционирования текста и изображений в нём, я с появлением CSS3 стал использовать display: inline-block предназначенный именно для позиционирования блоков. У него есть свои минусы, но об этом мы поговорим в другой статье.
Так вот, используя inline-block между блоками появился разрыв. Ранее, при его использовании данного разрыва не было. Пять часов было потрачено на игры с размерами блоков, использования box-sizing, в попытке уровнять размеры блока. Тем не менее, пробелы оставались. При этом, даже дебагер не мог найти ошибку, показывая, что блоки одинаковые, а место между есть неизвестно почему.
Тут я решил воспользоваться спецификацией CSS3. После прочтения информации по inline-block я долго матерился.
inline-block - генерирует блочный элемент, который обтекается другими элементами подобно встроенному элементу. В этом заключается вся проблема. Иначе говоря, inline-block ведет себя, как текст, а значит, в зависимости от размера шрифта в нем, а так же в зависимости от самого шрифта - меняется. Но и это не все. Раз он ведёт себя. как текст, значит так же реагирует на пробелы.
Меня в миг осенило. Полез в шаблон, и после закрывающегося article обнаружил несколько пробелов.
Начал собирать информацию по inline-block в сети, и данная проблема оказалась у многих. Кстати, в том же меню, советуют не ставить пробелы между тегами li. Были и способы позиционирования с помощью float, поиграть с шрифтом и его размером, но я считаю, достаточно правильно расчитать размер блока, и не оставлять пробелов, чем использовать костыли.
Итак, не забываем после inline-block не оставлять пробелов.

Уважаемые читатели! Если вы обнаружили в тексте ошибку, не поленитесь, выделите слово и нажмите CTRL+Enter. Сделаем язык чище!

  • 0
comments powered by Disqus

Ваше Имя:

Ваш E-Mail:

Или войтите с помощью социальных сетей

  • bowtiesmilelaughingblushsmileyrelaxedsmirk
    heart_eyeskissing_heartkissing_closed_eyesflushedrelievedsatisfiedgrin
    winkstuck_out_tongue_winking_eyestuck_out_tongue_closed_eyesgrinningkissingstuck_out_tonguesleeping
    worriedfrowninganguishedopen_mouthgrimacingconfusedhushed
    expressionlessunamusedsweat_smilesweatdisappointed_relievedwearypensive
    disappointedconfoundedfearfulcold_sweatperseverecrysob
    joyastonishedscreamtired_faceangryragetriumph
    sleepyyummasksunglassesdizzy_faceimpsmiling_imp
    neutral_faceno_mouthinnocent
  • Введите два слова, показанных на картинке: