Увеличение отступа между столбцами в CSS: margin и padding
Для управления пространством внутри ячеек используйте свойство padding для элементов td. Это обеспечит внутренние отступы, делая содержимое ячейки визуально более удобным для восприятия. Чтобы создать интервал между ячейками, используйте border-spacing в стилях для table. Пространство вокруг div , помещённого внутрь ячейки, можно регулировать при помощи внешних отступов, благодаря чему каждая ячейка получит дополнительное "дыхание".
Говоря об отступах, приходится иметь дело с двумя свойствами в CSS - margin и padding. Свойство margin определяет внешний отступ на всех четырёх сторонах элемента. Это сокращение, которое устанавливает все отдельные поля одновременно: margin-top, margin-right, margin-bottom и margin-left. Область отступов это пространство между содержанием элемента и его границей. Отрицательные значения не допускаются. Свойство padding краткая форма записи свойств, чтобы не писать отдельное правило для каждой стороны padding-top, padding-right, padding-bottom, padding-left.
Если Ваши элементы расположены в обратном порядке например, flex-row-reverse или flex-col-reverse , используйте утилиты space-x-reverse или space-y-reverse , чтобы обеспечить свободное пространство, добавив к правильной стороне каждого элемента. To use a negative space value, prefix the class name with a dash to convert it to a negative value. Эти утилиты на самом деле являются просто ярлыком для добавления поля для всех элементов в группе, кроме первого, и не предназначены для обработки сложных случаев, таких как сетки, компоновки с переносом или ситуации, когда дочерние элементы отображаются в сложной форме. В таких ситуациях лучше использовать утилиты промежутков , когда это возможно, или добавлять поля к каждому элементу с соответствующим отрицательным полем родительского элемента:. Tailwind позволяет условно применять служебные классы в разных состояниях с помощью модификаторов вариантов. Например, используйте hover:space-x-8 , чтобы применять утилиту space-x-8 только при hover.
