Простой способ задать отступы между flexbox элементами
Вариант 1 — отрицательный отступ для родительского блока
Самый простой способ установить минимальное расстояние между элементами flexbox – используем margin: 0 5px для дочерних элементов .item и отрицательный отступ margin: 0 -5px для родительского контейнера .box .
CSS
.box < display: flex; margin: 0 -5px; >.item
HTML
See the Pen NWGKWGJ by Denis (@deniscreative) on CodePen.dark
Вариант 2 — без отрицательного отступа с отступами по бокам
Не используем отрицательные отступы и не используем :first-child/:last-child . Задаем внутреннее поле для контейнера padding:5px и задаем отступы для дочерних элементов margin:5px . Таким образом мы получаем равномерный отступ 10px между дочерними элементами и от дочерних элементов до контейнера.
CSS
.box < display: flex; padding: 0 5px; >.item
HTML
See the Pen Uniform distribution of blocks with flex 2 by Denis (@deniscreative) on CodePen.dark
Вариант 3 — фиксированная ширина с помощью calc()
Задаем фиксированную ширину для дочерних элементов с учетом отступа между ними с помощью CSS функции calc() . Данный способ не совсем хорош для размещения флексбокс-элементов в несколько рядов, потому что элементы растягиваются по краям контейнера justify-content: space-between .
CSS
.box < display: flex; flex-wrap: wrap; justify-content: space-between; >.item < width: calc(1/3*100% - (1 - 1/3)*10px); margin: 0 0 10px; >
где 1/3 — это 3 колонки в ряд, и 10px — это ширина между колонками.
HTML
See the Pen Uniform distribution of blocks with flex 3 by Denis (@deniscreative) on CodePen.dark
Вариант 4 — фиксированная ширина с помощью calc() с отступами по бокам
Задаем фиксированную ширину для дочерних элементов с учетом отступа между ними с помощью CSS функции calc() . Но главное отличие от предыдущего варианта, что для дочерних элементов .item заданы отступы по бокам, а для родительского контейнера .box заданы отрицательные отступы как в первом примере. И таким образом, мы можем задать justify-content: flex-start; чтобы flexbox-элементы располагались равномерно слева направо.
Я чаще всего использую этот вариант, как наиболее универсальный и удобный для размещения любых flexbox-элементов.
CSS
.box < display: flex; flex-wrap: wrap; justify-content: flex-start; margin: 0 -5px; >.item < width: calc(1/3*100% - 10px); margin: 5px; >
где 1/3 — это 3 колонки в ряд, и 10px — это ширина между колонками.
HTML
See the Pen Uniform distribution of blocks with flex 4 by Denis (@deniscreative) on CodePen.dark
Естественно, что способов для того, чтобы задать отступы между флексбокс-элементами или для их равномерного размещения внутри контейнера, гораздо больше, и есть гораздо более изощренные варианты. Но я привел наиболее часто используемые способы и самые простые для понимания.
Допустим, у нас есть несколько nth-child элементов, к которым мы хотим применить различную задержку для…
Очень популярная функция на различных одностраничниках — плавный скролл к нужному элементу на этой же…
Использование @keyframes с препроцессором SASS. Базовый пример использования @keyframes в SASS: Создаем миксин, чтобы добавить…
CSS счетчики, в своей сущности, переменные CSS, значения которых могут быть инкрементированы при помощи CSS…
Границы и отступы в потоке
Через день после написания статьи про поток я вдруг обнаружил, что совершенно бессовестным образом позабыл написать там о том, как он работает с точки зрения именно раскладки. Забыл, то есть, самую суть :-).
Исправляю это упущение!
Даем место
Очень часто при раскладке страницы возникает задача вынуть что-то из общего потока страницы и повесить рядом с основным содержимым и оформить в виде плавающей панельки.
В этом случае можно тот блок, который будет панелью, повесить абсолютно, а основное содержимое оставить в потоке. Однако этого недостаточно, потому что панелька залезет сверху текста.
Вот здесь и начинают работать границы и отступы. Их основная задача: сдвинуть край блока в потоке, чтобы дать место для чего-то другого. Задаются они свойствами margin-left , margin-right , padding-left , padding-right .
Часто в разных форумах наталкиваюсь на «извечные вопросы», один из которых: что использовать — margin или padding. Причем, «экспертные» ответы бывают часто в духе «надо использовать всегда только margin (padding), потому что padding (margin) глючит». Это, конечно, неверно. Глючить та или иная раскладка может по миллиону причин, и выбор отступов или границ тут редко реально виноват.
Суть выбора же предельно проста: padding находится внутри границ, и на нем нарисован фон бокса, а margin — за границами, и он прозрачен. Поэтому выбирать надо исходя из того, как вы хотите, чтобы оставляемое пустое место выглядело: внутри блока или снаружи. Если же у вас нет ни фона, ни границ, то разницы никакой и нет. Хоть монетку подкидывайте.
Схлопывание границ
По этому поводу есть очень хорошая и ставшая уже классической статья гуру CSS Эрика Мейера. Эта глава, по большей части — вольное изложение ее по-русски.
Схлопывание границ («margin collapsing») — это на первый взгляд странный эффект, который наблюдается с верхней и нижней границами блоков. Проявляется он двояко.
Наложение границ соседей
Первое проявление — это когда границы между двумя соседними блоками «проваливаются» друг в друга. Для примера возьмем два блока — заголовок и абзац, идущие в потоке один за другим:
Заголовок
Абзац текста
Дадим заголовку верхнюю и нижнюю границу в 20 пикселов, а абзацу — в 10.
h1 < margin:20px 0; >p
Кстати, вот эти » 10px 0 » — это удобная сокращенная запись. Первая цифра задает верх и низ, вторая — право и лево. Она подходит не только для margin’ов, но и для всех остальных свойств, которые могут задаваться для сторон бокса.
Так вот, нижняя граница заголовка и верхняя граница абзаца наложатся друг на друга и между ними будет не 30 пикселов, а 20 (по наибольшей границе).
Вываливание за родительские границы
Эта штука менее очевидна. Представьте себе несколько абзацев, идущих один за другим, заключенных в один общий блок-контейнер:
абзац
абзац
абзац
Дадим и контейнеру и абзацам верхние и нижние границы:
p < margin:10px 0; >div
Здесь схлопывание проявляется в том, что верхний margin первого абзаца не лежит внутри div’а, а вываливается из него наверх.
Margin самого контейнера и margin первого блока накладываются, и в итоге место перед контейнером равно наибольшему из них.
Тоже самое происходит и внизу с нижними margin’ами контейнера и последнего вложенного блока.
Отчего так
Схлопывание границ — не глюк и не ошибка браузеров. Это специально придуманное поведение. Оно, хоть и кажется на первый взгляд странным, совершенно нормально для того, для чего поток служит в первую очередь: форматирования текста.
В частности, наложение границ соседних элементов очень полезно, когда вы определяете границы для заголовков, абзацев, списков — основных блочных элементов текста. Без схлопывания в группе абзацев расстояние между ними было бы больше, чем перед первым и после последнего.
Это можно было бы обойти заданием только нижней или только верхней границы, но тогда пришлось бы отдельно бороться с тем, что первый или последний абзац прилипают к границам своего контейнера. Со схлопыванием же вы всегда можете задавать элементу те границы, которые нужны именно ему, не думая о том, что его окружает.
Так вот, если бы верхняя граница абзаца не вываливалась из элемента списка наверх, то текст абзаца съезжал бы вниз, и не был бы напротив точечки списка. А это некрасиво.
Проблемы при раскладке
C простым потоком текста схлопывание работает хорошо, а вот при раскладке иногда оно аукается совсем не так, как хотелось бы. Возьмем простой пример. Нам нужен в начале страницы верхний блок, в котором будут заголовок и подзаголовок:
Суперконтора
Суперконторим с 1381 года
Дальше по совету гипотетического мегадизайнера нашей суперконторы мы хотим, чтобы весь верхний блок прилегал к краям страницы, имел темно-красный фон, заголовок «Суперконтора» имел бы ярко-красный фон, а текст внутри всего верхнего блока был белым. И кроме того, хочется, чтобы вокруг текста были определенные отступы. Тогда гиперверстальщик нашей суперконторы пишет такой стиль:
body < margin:0; >#header < background-color:darkred; color:white; >#header h1 < margin:20px 0 10px 0; background-color:red; >#header p
И получается у нас вот такое:
Белое пространство над верхним блоком — это вывалившийся из него верхний margin заголовка! Явно не то, чего нам хотелось. Нам хотелось, чтобы этот margin сидел внутри верхнего блока, и чтобы вместо дешевенького белого фона там был трендовый темно-красный! Хотя с точки зрения чистого текст все нормально — 20 пикселов свободного места сверху заголовка присутствуют. Но теперь, поскольку у нас есть фон, нам далеко не все равно, сидит этот margin внутри верхнего блока или вываливается наружу.
Существует несколько способов, отменяющих вываливание границ элементов за пределы контейнера.
-
Вываливание отменяется, если блоку-контейнеру назначить padding или border (с той стороны, где вываливается). В нашем примере это будет выглядеть так:
#header
Минус состоит в том, что высота всего верхнего блока увеличивается на 2 пиксела. Это может и не быть чем-то страшным, но если на высоту этого блока ориентируются другие элементы дизайна, то это не очень хорошо. И нет, нулевой padding не заработает :-). Это все равно, что его нет. 2. В случае, когда пикселы все же лишние, есть другой способ. Можно вываливающуюся верхнюю границу у заголовка убрать, а вместо нее поставить верхний padding самому контейнеру. Визуально эффект будет как раз нужный. И то же самое можно проделать и снизу блока.
#header < padding-top:20px; padding-bottom:5px; >#header h1 < margin:0 0 10px 0; >#header p
Итог
Итак, вываливание границ за пределы контейнера может вызывать некрасивые эффекты. Для борьбы с ним есть три способа со своими плюсами и минусами.
Эта статья — часть находящегося в процессе написания цикла под рабочим названием «Учебник». Я рекомендую ознакомиться и с другими статьями, которые можно найти в категории «Учебник», где они сейчас собраны в обратном хронологическом порядке.
Комментарии: 20
С тем, про что написано, всё понятно, а вот почему в IE появляется отступ на 1-2 пикселя от края плавающего блока? Вот пример (как раз этим сейчас занимаюсь) — http://ph-web.com.ru/shop2/example.php?group_id=4&id=1
Иван Сагалаев
Не совсем понял, как это связано с отступами в потоке :-). Скорее всего, это один из многих багов IE. Подозреваю, что этот: http://www.positioniseverything.net/explorer/threepxtest.html
[. ] В блогосфере на этой неделе гулял устойчивый ветерок хайтека в области веб-технологий и блоггинга. К примеру сразу на нескольких блогах вспыхнула полемика около знаменитого звездочного CSS-хака для IE. Никита Вакорин на мой взгляд “поспешил” с заявлениями на эту новость и рекомендациями убирать этот хак из своих CSS-файлов. Мне лично более импонирует в этом вопросе позиция Ивана Сагалаева, который точно подметил, что с появлением IE 7 старые версии IE ни куда не денутся… Конечно же это личное дело каждого, но… не нужно сбрасывать со счетов IE 5.x и IE 6. Ну и коли уж мы коснулись CSS, то не проходите мимо другой статьи Ивана – “Границы и отступы в потоке“, в которой подробно изложено как работать с margin- и padding-свойствами блоков. [. ]
[…]Мне лично более импонирует в этом вопросе позиция Ивана Сагалаева, который точно подметил, что с появлением IE 7 старые версии IE ни куда не денутся… Конечно же это личное дело каждого, но… не нужно сбрасывать со счетов IE 5.x и IE 6. […]
Совершенно согласен с Иваном Сагалаевым 🙂
Старые версии IE никуда не денутся из-за трудности с получеием новых (легально, конечно) — за них надо платить дополнительные деньги. (Хм, за исправление недоработок). А вот на старые версии Opera или FireFox, как мне кажется, можно необращать внимания, т.к. новые исправленные всегда можно получить почти бесплатно (опять же, полне легально).
К сожалению, не знаю как там обстоят дела с остальными браузерами.
Константин
Спасибо за еще одну замечательную статью.
Все описанные методы борьбы со схлопыванием при раскладке работают «как часы». 😉
Не совсем только понятно почему IE6 не подчиняется правилам «вываливания за родительские границы» даже в стандартном режиме рендеринга.
Опечаточка в текст закралась:
но о нем будет целая следующая статься.
За статьи спасибо, CSS основательно занимаюсь уже года 3, но некоторых упомянутых решений (в смысле, work-around которые по-английски) не знал.
RommeDeSerieux
http://www.w3.org/TR/CSS2/box.html#collapsing-margins Отступы также не схлопываются у абсолютно и относительно отпозиционированных блоков. Правда, в css2.1 оставили только абсолютно отпозиционированные (непонятно, зачем), но на поддержке браузерами это не сказалось.
За статьи спасибо, CSS основательно занимаюсь уже года 3, но некоторых упомянутых решений (в смысле, work-around которые по-английски) не знал.>
Согласен полностью, только счас увидел про это.
Спасибо огромное за статью
webmolot.com
Чтобы блок не вываливался за верхнюю (нижнюю)границу контейнера, можно для контейнера прописать определение display:table
webmolot.com
а так же overflow:hidden
Этим способам есть простое объяснение: поля (margin) схлопываются при соприкосании. При добавлении padding и border соприкосания не происходит, hidden отсекает поля друг от друга.
Не обессудьте, если не в тему.. «Создал» http://www.vamatveychuk.narod.ru используя исключительно абсолютное позиционирование, но коректно отображается страница только в IE. Как исравить? Заранее благодарен за помощь..
В качестве подсказки:
#top_car и так далее и тому подобное — позиционируем блоки относительно друг друга с использованием css.
Подскажите пожалуйста, почему отступ вложенного блока влияет на отступ родительского(если он пустой) и как от этого избавиться? Пример:
body < margin: 0; padding: 0; >#b1 < height: 200px; background: #aaa; >#b2
www.google.com/profiles/andrey.g.matveev
Спасибо за статью. Только что в очередной раз столкнулся с этой «проблемой», и, хоть решения я уже знал, хотелось выяснить, в чём, собственно, дело.
Большое спасибо за статью и разложение всего по полочкам! Также, спасибо Webmolot’у за комментарии, попробовала Ваши способы — всё работает!
Никита Лебедев
было интересно узнать откуда растут ноги у таких завалов, это же явно было не баги. В своем опыте такие вещи не применяю никогда, гораздо понятнее сделать все через float’ы.
Anton Diaz
Все три способа плохи. Про первый и говорить не буду, и так всё ясно. Про второй. Это плохое решение, если у вас много заголовков и параграфов в родительском блоке. В этом случае придется отдельно убирать отступы для первых и последних абзацев и параграфов. Очень неудобно. Про третий. Не подходит, если нужно сохранить автоширину, заполняющая всю ширину родителя. Ведь флоаты и абсолютно позиционированные элементы имеют ширину контента. Width:100% не покатит, если у нашего заголовка есть свои padding-и. После некоторых размышлений придумал другой способ. Нужно просто добавить псевдоэлементы нулевого размера в родитель (на манер clearfix) со свойством display:table. В HTML код надо просто добавить класс «nocollapse» к тому родительскому элементу, у которого возникает схлопывание с дочерними. А в CSS следующий код:
.nocollapse:before, .nocollapse:after
В случае со старыми IE, которые не поддерживают display:table (до 7 включительно), возможно, поможет zoom:1, хотя я не тестировал.
Anton Diaz
Ах да, принцип как раз такой же получился, как и в новом clearfix. Вот как выглядит новый вариант clearfix из html5boilerplate (борется как с вываливающимися флоатами, так и вываливанием margin-ов из родителя):
.clearfix:before, .clearfix:after < content: " "; display: table; >.clearfix:after < clear: both; >.clearfix < *zoom: 1; /* Для IE6, IE7 */ >А почему в новом clearfix используется именно display:table ? Можно же display:block. Результат тот же, проще для понимания, и хак для осклика не нужен.
Может быть это обьяснение(нашел в одной из либ) // 2. The use of table rather than block is only necessary if using // :before to contain the top-margins of child elements.
Долой отступы между строчными элементами (и блоками)
Строчные блоки (inline-block) во многих случаях очень удобное средство разметки. Примеры их использования можно посмотреть в статьях Inline-block: простое свойство для непростых задач, Выравнивание навигации из блоков по центру, Центрирование резинового блока по горизонтали.
Вместе с тем, с ними связан подводный камень. Я бы даже сказал целый булыжник. Хочешь его увидеть? Поставь несколько строчных элементов (или строчных блоков) в ряд.
Допустим имеем такой HTML:
Делаем элементы строчными:
…или строчными блоками:
Проблема
Большинство браузеров разделяет строчные блоки (элементы) отступами. Для удобства восприятия я немного раскрасил блоки.
Опаньки! Что за отступы? Я ничего такого не прописывал!
Давай договоримся, что здесь и далее я буду писать просто «строчный блок», а подразумевать «строчный блок (display:inline-block) или просто строчный элемент (display:inline)», поскольку проблема у них совершенно общая и лечится она тоже одинаково.
Кого лечим?
Итак строчные блоки обзавелись загадочными отступами. Конечно, это касается не только списков. Так же поведет себя и группа расположенных подряд, например, span’ов.
Справедливости ради, следует заметить, что IE6 и IE7 отрисуют все это дело без отступов:
Вот так хочу, чтобы все браузеры отображали!
Не будем вдаваться в детали вопроса, кто прав, а кто виноват (читай — криво поддерживает стандарты), просто добьемся кроссбраузерности. Очень удобно, когда поведение предсказуемое — не задавал я никаких отступов, значит и рисовать мне их не нужно!
На самом деле все просто — чтобы убрать отступы, нужно понять, откуда они там вообще взялись!
Откуда отступы-то?
А понять не сложно. Достаточно просто записать теги в одну строку:
Чудеса! Отступы пропали сами собой! Вывод: порождают их невидимые символы между тегами — перенос или пробел.
Само собой, «писать все в одну строку» хоть и является кроссбраузерным решением проблемы, но тут не рассматривается, по понятным причинам (ну кто ж пишет без отступов?). Ищем другие пути.
Долой отступы!
Раз отступы создают символы из контейнера, здравой мыслью будет эти символы «обезвредить» — задать им font-size:0; (главное, не забыть, что это свойство наследуется и перебить его для самих потомков):
ul < font-size:0; >li
Отличное решение! Строчные блоки действительно прижались друг к другу. Осталась еще небольшая косметическая проблема: в некоторых браузерах (например, в Opera 9.5 и младше) замечен отступ сверху или снизу в пределах родителя (родитель на рисунке залит бледным серо-зеленым):
картинка увеличена, чтоб было видно отступы по вертикали
Проблема эта сродни описанной в статье IMG внутри блока — убираем странный отступ, и лечится примерно так же: добавляем line-height:0; (опять не забываем перекрыть у потомка). Итак, получаем:
ul < font-size:0; line-height:0; >li < font-size:14px; line-height:normal; /* ну или другое подходящее значение */ display:inline; >
Теперь-то все хорошо и красиво? Не тут-то было!
Пришла беда, откуда не ждали
Видать, действительно эти отступы должны быть! В подтверждение этому есть два железных аргумента:
- их не рисует IE6-7;
- их, несмотря на наши старания, все равно рисуют Webkit-браузеры.
Да-да! И Safari и Chrome после всех вышеизложенных ухищрений соизволили просто уменьшить отступы с трех пикселей до одного!
Упрямые webkit’ы не хотят сдаваться!
Update by Nick. Еще один скрытый сюрприз преподнес FF. Если масштабировать страницу иногда наблюдается дополнительный отступ в 1px сверху. Лечится это добавлением правила display: -moz-inline-stack;
Окончательное решение
Побороть webkit’ы получилось с помощью letter-spacing:-1px. При этом никаких вредных побочных эффектов обнаружено не было (если, конечно не забыть перекрыть свойство у потомков).
Окончательный CSS с кроссбраузерным решением для строчных элементов:
ul < font-size:0; /* убираем горизонтальные отступы */ line-height:0; /* . и вертикальные в некоторых браузерах */ letter-spacing:-1px; /* переубеждаем webkit'ы */ >li < font-size:14px; /* Не забываем восстановить нормальные значения */ line-height:normal; letter-spacing:normal; display:inline; >
Для строчных блоков:
ul < font-size:0; /* убираем горизонтальные отступы */ line-height:0; /* . и вертикальные в некоторых браузерах */ letter-spacing:-1px; /* переубеждаем webkit'ы */ >li < font-size:14px; /* Не забываем восстановить нормальные значения */ line-height:normal; letter-spacing:normal; display: -moz-inline-stack!important; display:inline-block; //display:inline; zoom:1; >
Не забудь, что свойство zoom невалидно. Поэтому в боевых условиях выноси его и хак для IE в отдельный CSS, подключаемый с помощью условных комментариев.
- IE 6-8
- Firefox 3.5
- Opera 9.5-10.5
- Safari 4
- Chrome 7
- CSS приемы
- «Дергание» сайта
- background position со смещением
- clearfix
- CSS прозрачность
- CSS хаки
- RGBA — CSS полупрозрачность
- Затемнение фона
- Кроссбраузерный
- Обнуление отступов
- Порядок описания ссылок
- Прелоад изображений
- Сброс стилей
- Сокращения в CSS
- Убираем рамку с эл-ов в фокусе
- Условные CSS
- Условные комментарии
- Поворот вокруг своей оси
- Поворот объекта вокруг свой
- Resize для textarea в Safari и Chrome
- Блочная верстка форм
- Кастомные checkbox и radio на CSS
- Кросбраузерные input и textarea
- Кроссбраузерный button
- Нестандартные checkbox
- Нестандартные radio
- Нестандартные select
- Нестандартные select multiple
- Нестандартные поля выбора файла
- Нестандартные текстовые поля
- О кроссбраузерности placeholder
- Отступы у checkbox и radio
- Оформление input type=search
- Резиновая кнопка
- Текст в поле type=»password»
- Блоки равной высоты в строке
- Колонки равной высоты
- Прижимаем подвал к низу
- Ресайз окна: потомок перерос родителя
- Сайт в центре экрана
- Фиксированная колонка + резиновая + clear:both
- CSS 3D лента
- CSS3 всплывающие подсказки
- IMG внутри блока — убираем странный отступ
- IMG: меняем рисунок при наведении
- Аккордеон на чистом CSS3
- Валидный target=»_blank»
- Верстка рейтингов
- Верстка содержания
- Вставка спецсимволов в генерируемый контент
- Вставка стрелок
- Индивидуальные стили для li. Избавляемся от классов.
- Масштабируемая картинка в резиновой колонке
- Многоколоночный текст на CSS3
- Нестандартное подчеркивание
- Отменяем обтекание текстом картинки
- Оформление внешних ссылок
- Оформление изображений по align
- Оформляем «ol»
- Правильные анонсы новостей
- Список определений. Требуем невозможного.
- Firefox
- -moz-box-shadow и -moz-border-radius — это кошмар CPU
- Позиционирование внутри button
- Ширина input type=file
- Onload в IE9
- z-index в IE6-7
- Баг с текстом при применении Alpha фильтра
- Масштабирование и PIE
- Отступы в кнопках в IE6-7
- Проблемы с em
- Эмуляция after и before для IE 6-7
- Эмуляция data:URL для IE6-7 — используем MHTML-включение
- hasLayout
- Max-width
- Min-height
- Min-width
- Min-width и max-width одновременно
- PNG и прозрачность
- Высота блока 1px
- Дублирование символов
- Дырка под футером
- Как перекрыть select
- Обрезка контента c отрицательным margin в IE6
- Отступы плавающих блоков
- Проблемы с размерами блоков
- Псевдокласс :first-child
- Псевдокласс hover в IE 6
- Селектор потомков >
- Селекторы атрибутов [type=…]
- Сестринский селектор
- Смещение на 1px
- Ссылки с вложением
- Устраняем flickering
- Эмуляция position:fixed
- overflow-y
- Не подгружаются шрифты @font-face
- Проблема с oveflow: hidden
- Скругление img
- HTML шаблон для мобильных устройств
- Выпадающее меню на CSS
- Выравнивание навигации из блоков по центру
- Выравнивание навигации по середине
- Резиновое меню
- Резиновое меню из блоков
- Убираем класс для первого элемента
- Box-sizing: переключаем блочную модель
- inline-block: простое свойство для непростых задач
- Вертикальная позиция для строчного элемента
- Вертикальное выравнивание
- Выравнивание по центру с position: absolute
- Вычисляемые отступы
- Два в одном: позиция + размеры
- Долой отступы между строчными элементами (и блоками)
- Обходим схлопывание margin
- Центрирование картинки в блоке
- Центрирование резинового блока по горизонтали
- Активация flash
- Вставка flash в HTML
- Вставляем ролик с YouTube
- Как отключить flash
- Как перекрыть flash
- Параметры для вставки объектов
- Ссылка на flash объекте
- CSS треугольники
- Аппаратное ускорение анимации
- Встраиваем изображения — data:URL
- Градиент: CSS3 против CSS2 + картинка
- Лесенка спрайтов — сложный случай поклейки
- На одну картинку меньше. Спецсимвол ×
- Необычные тени с CSS3 box-shadow
- Оптимизация Google Web Fonts
- Оптимизация фонов с помощью Canvas
- Проблемы с border-radius
- Псевдоэлемент before для маркера списка
- Скругление углов. Обзор методов.
- Сокращаем HTML5 код
- Спрайты: меньше картинок — больше скорость
- Тень для блока
- Фигуры с углами на CSS
- Шаблоны градиентов
- Дополнение Skype
- Подключить favicon
- Профилактика сайта: максимально простое оповещение
- Ссылки на skype
- @font-face в деталях
- Cufon — нестандартный шрифт средствами JS
- font-size: 100.01% для html
- Безопасные шрифтовые CSS стеки для англоязычных текстов
- Безопасные шрифтовые CSS стеки для рунета
- Безопасные шрифты
- Вертикальный текст
- Используем псевдоэлемент :first-letter
- Контур для текста
- Нестандарный шрифт. Быть ему или нет?
- Нестандартный шрифт средствами CSS
- Плавающий :first-letter
- Подмена текста изображением
- Соответствия шрифтов Windows, Mac и Unix/Linux
- Строчный :first-letter
- Текст под углом
- Текст с CSS градиентом
- Тень для текста
- Эффект отражения
Пространство между
Утилиты для управления пространством между дочерними элементами.
Краткая справка
Show all classes
Основы использованияДобавьте горизонтальное пространство между детьми
Контролируйте расстояние между элементами по горизонтали с помощью утилит space-x- .
div class="flex space-x-4 . "> div>01div> div>02div> div>03div> div>Добавьте вертикальное пространство между дочерними элементами
Контролируйте расстояние между элементами по вертикали с помощью утилит space-y- .
div class="flex flex-col space-y-4 . "> div>01div> div>02div> div>03div> div>Изменение порядка дочерних элементов
Если Ваши элементы расположены в обратном порядке (например, flex-row-reverse или flex-col-reverse ), используйте утилиты space-x-reverse или space-y-reverse , чтобы обеспечить свободное пространство, добавив к правильной стороне каждого элемента.
div class="flex flex-row-reverse space-x-4 space-x-reverse . "> div>01div> div>02div> div>03div> div>Использование отрицательных значений
To use a negative space value, prefix the class name with a dash to convert it to a negative value.
div class="flex -space-x-4 . "> div>Ограничения
Эти утилиты на самом деле являются просто ярлыком для добавления поля для всех элементов в группе, кроме первого, и не предназначены для обработки сложных случаев, таких как сетки, компоновки с переносом или ситуации, когда дочерние элементы отображаются в сложной форме. индивидуальный порядок, а не их естественный порядок DOM.
В таких ситуациях лучше использовать утилиты промежутков, когда это возможно, или добавить поле к каждому элементу с соответствующим отрицательным полем на родительском элементе:
div class="flow-root"> div class="-m-2 flex flex-wrap"> div class="m-2 . ">div> div class="m-2 . ">div> div class="m-2 . ">div> div> div>Невозможно объединить с разделенными утилитами
Утилиты space-* не предназначены для совместной работы с утилитами разделения. В таких ситуациях рассмотрите возможность добавления для дочерних элементов утилит margin/padding .
Применяя условно
Наведение, фокус и другие состояния
Tailwind позволяет условно применять служебные классы в разных состояниях с помощью модификаторов вариантов. Например, используйте hover : space-x-8 , чтобы применять утилиту space-x-8 только при hover .
div class="flex space-x-2 hover:space-x-8"> div>Полный список всех доступных модификаторов состояния смотрите в документации Наведение, фокус и другие состояния.
Контрольные точки и медиа-запросы
Вы также можете использовать модификаторы вариантов для таргетинга на медиа-запросы, такие как реагирующие контрольные точки, темный режим, предпочтения с уменьшенным движением и многое другое. Например, используйте md: space-x-8 , чтобы применить утилиту space-x-8 только на экранах среднего размера и выше.
div class="flex space-x-2 md:space-x-8"> div>Использование пользовательских значений
Настройка вашей темы
По умолчанию в шкале Tailwind используется шкала интервалов по умолчанию. Вы можете настроить масштаб интервалов, отредактировав theme.spacing или theme.extend.spacing в вашем файле tailwind.config.js .
tailwind.config.js
module.exports = theme: extend: spacing: '5px': '5px', > > > >Кроме того, вы можете настроить только масштаб пространства, отредактировав theme.space или theme.extend.space в вашем файле tailwind.config.js .
tailwind.config.js
module.exports = theme: extend: space: '5px': '5px', > > > >Дополнительные сведения о настройке темы по умолчанию смотрите в документации настройка темы.
Произвольные значения
Если вам нужно использовать одноразовое space-
div class="space-y-[5px]"> div>Узнайте больше о поддержке произвольных значений в документации по произвольным значениям.
Copyright © 2023 Tailwind Labs Inc.