Расстояние между блоками css: Как убрать отступы между блоками css

Содержание

html — Отступы между блоками на flex

Задать вопрос

Вопрос задан 1 год 4 месяца назад

Изменён 8 месяцев назад

Просмотрен 7k раз

Есть следующий макет:

Сверстано так:

.block3_header {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 87px;
}
.block3_header span {
  font-family: 'Gilroy-Bold';
  font-size: 34px;
  line-height: 42px;
  text-align: center;
  color: #070707;
}
.block3_subText {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 55px;
}
.block3_subText span {
  font-family: 'Gilroy-Medium';
  font-size: 18px;
  line-height: 22px;
  text-align: center;
  color: #070707;
}
.  container_skills {
  margin-top: 80px;
}
.block3_skills {
  display: flex;
  align-content: flex-end;
  justify-content: space-evenly;
  align-items: flex-start;
}
.block3_skill {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.block3_stars {
  display: flex;
}
.block3_stars img {
  margin-right: 9px;
}
.block3_stars:last-child {
  margin-right: 0;
}
.block3_subTitle {
  display: flex;
  margin-top: 24px;
  margin-bottom: 42px;
}
.block3_subTitle span {
  font-family: 'Gilroy-Bold';
  font-size: 14px;
  line-height: 17px;
  text-align: center;
  color: #828282;
}

<div>
  <div>
    <div>
      <div>
        <img src="/img/PS.svg" alt="Photoshop">
      </div>
      <div>
        <span>
                                Adobe<br>Photoshop
                            </span>
      </div>
      <div>
        <img src="/img/Star.svg" alt="">
        <img src="/img/Star.svg" alt="">
        <img src="/img/Star.  svg" alt="">
        <img src="/img/Star.svg" alt="">
        <img src="/img/StarWithoutFill.svg" alt="">
      </div>
    </div>
    <div>
      <div>
        <img src="/img/AI.svg" alt="Adobe Illustrator">
      </div>
      <div>
        <span>
                                Adobe<br>Illustrator
                            </span>
      </div>
      <div>
        <img src="/img/Star.svg" alt="">
        <img src="/img/Star.svg" alt="">
        <img src="/img/Star.svg" alt="">
        <img src="/img/StarWithoutFill.svg" alt="">
        <img src="/img/StarWithoutFill.svg" alt="">
      </div>
    </div>
    <div>
      <div>
        <img src="/img/AE.svg" alt="Adobe After Effects">
      </div>
      <div>
        <span>
                                Adobe<br>After Effects
                            </span>
      </div>
      <div>
        <img src="/img/Star.   svg" alt="">
        <img src="/img/Star.svg" alt="">
        <img src="/img/Star.svg" alt="">
        <img src="/img/Star.svg" alt="">
        <img src="/img/StarWithoutFill.svg" alt="">
      </div>
    </div>
    <div>
      <div>
        <img src="/img/Figma.svg" alt="Figma">
      </div>
      <div>
        <span>
                                Figma<br><br>
                            </span>
      </div>
      <div>
        <img src="/img/Star.svg" alt="">
        <img src="/img/Star.svg" alt="">
        <img src="/img/Star.svg" alt="">
        <img src="/img/Star.svg" alt="">
        <img src="/img/StarWithoutFill.svg" alt="">
      </div>
    </div>
  </div>
</div>

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

html
css
вёрстка
flexbox

display:flex;
justify-content: center; // Контент по центру
flex-wrap: nowrap;
align-items: center;
grid-gap:20px; // отступы между flex элементами

Зарегистрируйтесь или войдите

Регистрация через Google

Регистрация через Facebook

Регистрация через почту

Отправить без регистрации

Почта

Необходима, но никому не показывается

Отправить без регистрации

Почта

Необходима, но никому не показывается

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Пространство между — Tailwind CSS

Основы использования

Добавьте горизонтальное пространство между детьми

Контролируйте расстояние между элементами по горизонтали с помощью утилит space-x-{amount}.

<div>
  <div>01</div>
  <div>02</div>
  <div>03</div>
</div>

Добавьте вертикальное пространство между дочерними элементами

Контролируйте расстояние между элементами по вертикали с помощью утилит space-y-{amount}.

<div>
  <div>01</div>
  <div>02</div>
  <div>03</div>
</div>

Изменение порядка дочерних элементов

Если Ваши элементы расположены в обратном порядке (например, flex-row-reverse или flex-col-reverse), используйте утилиты space-x-reverse или space-y-reverse, чтобы обеспечить свободное пространство, добавив к правильной стороне каждого элемента.

<div>
  <div>01</div>
  <div>02</div>
  <div>03</div>
</div>

Использование отрицательных значений

To use a negative space value, prefix the class name with a dash to convert it to a negative value.

<div>
  <!-- ... -->
</div>

Ограничения

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

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

<div>
  <div>
    <div></div>
    <div></div>
    <div></div>
  </div>
</div>

Невозможно объединить с разделенными утилитами

Утилиты space-* не предназначены для совместной работы с утилитами разделения. В таких ситуациях рассмотрите возможность добавления для дочерних элементов утилит margin/padding.

Применяя условно

Наведение, фокус и другие состояния

Tailwind позволяет условно применять служебные классы в разных состояниях с помощью модификаторов вариантов. Например, используйте hover:space-x-8, чтобы применять утилиту space-x-8 только при hover.

<div>
  <!-- ... -->
</div>

Полный список всех доступных модификаторов состояния смотрите в документации Наведение, фокус и другие состояния.

Контрольные точки и медиа-запросы

Вы также можете использовать модификаторы вариантов для таргетинга на медиа-запросы, такие как реагирующие контрольные точки, темный режим, предпочтения с уменьшенным движением и многое другое. Например, используйте

md:space-x-8, чтобы применить утилиту space-x-8 только на экранах среднего размера и выше.

<div>
  <!-- ... -->
</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-{x|y} value, которое не имеет смысла включать в вашу тему, используйте квадратные скобки, чтобы сгенерировать свойство на лету, используя любое произвольное значение.

<div>
  <!-- ... -->
</div>

Узнайте больше о поддержке произвольных значений в документации по произвольным значениям.

html — Почему между элементами блока есть пробел?

спросил 9 лет, 2 месяца назад

Изменено 9 лет, 2 месяца назад

Просмотрено 583 раза

Итак, я знаю, что это происходит, и я знаю обходные пути для этого (большую часть времени я просто использую float), но мой вопрос почему в начале есть пробел?

Вот скрипка, с которой я возился:

, если вы измените . box на float: left; пробел исчезает. Просто очень любопытно, почему вообще есть место.

HTML
CSS

Посмотрите на эту версию: http://jsfiddle.net/6LftK/1/ и обратите внимание, что я удалил пробел между элементами в HTML. пробел существует, потому что в HTML есть пробел, а встроенных элементов учитывают этот пробел и включают встроенных блоков элементов. Путем плавания элемента вы изменили его со встроенного элемента на блок .

 <дел>

Причина наличия пробелов в том, что элементы встроенного блока обрабатываются как обычный текст, в том смысле, что они содержат пробелы. Некоторые обходные пути включают использование font-size: 0 в контейнере, а затем сброс размера шрифта в элементах встроенного блока; использование отрицательных полей для свертывания пространства; или изменив свой HTML, чтобы удалить пробелы.

В CSS Tricks есть полезная статья на эту тему.

Вы можете добавить

 margin: -2px;

9От 0002 до #manufactureLogos div {} для простого трюка с CSS, чтобы очистить пустое пространство, созданное пробелами и разрывами строк, и сохранить синтаксис кода.

 #manufactureLogos div{
    отображение: встроенный блок;
    поле: -2px;
}

Но это только предполагает, что размер символа по умолчанию для пробела занимает 2 пикселя браузера.

Двойной страховкой будет использование метода Аарона, а также размер шрифта по умолчанию равный 0.

 #manufactureLogos div{
    отображение: встроенный блок;
    поле: -2px;
    размер шрифта: 0;
}

Пример JSFiddle

Или, как упоминал Арронбуров, вы можете установить контейнеры font-size: 0; , также эффективно удалив белый пробел.

Лучший способ решить эту проблему — установить для font-size значение 0 в #manufactureLogos , чтобы оно было таким:

 #manufactureLogos {
    ширина: 850 пикселей;
    размер шрифта: 0;
}

Также вы должны установить размер шрифта в . box , чтобы было так

 .ящик {
    фон: серый;
    ширина: 140 пикселей;
    высота: 140 пикселей;
    отступ: 0px 15px;
    размер шрифта: 16px;
}

Возможно, эта ссылка поможет вам, в ней есть более подробная информация

Борьба с пространством между встроенными блочными элементами | CSS-Tricks

Надеюсь, это поможет вам…

Зарегистрируйтесь или войдите в систему

Зарегистрируйтесь с помощью Google

Зарегистрироваться через Facebook

Зарегистрируйтесь, используя электронную почту и пароль

Опубликовать как гость

Электронная почта

Обязательно, но не отображается

Опубликовать как гость

Электронная почта

Требуется, но не отображается

Нажимая «Опубликовать свой ответ», вы соглашаетесь с нашими условиями обслуживания и подтверждаете, что прочитали и поняли нашу политику конфиденциальности и кодекс поведения.

Свойство CSS border-spacing

❮ Назад Полное руководство по CSS Далее ❯

Пример

Установите интервал между границами таблицы:

#table1 {
граница-коллапс: отдельная;
интервал между границами: 15 пикселей;
}

#table2 {
граница-коллапс: отдельная;
border-spacing: 15px 50px;
}

Попробуйте сами »

Определение и использование

Свойство border-spacing устанавливает расстояние между границами соседних ячеек.

Примечание: Это свойство работает только при коллапс границы отдельный.

Показать демо ❯

Значение по умолчанию:	2 пикселя
По наследству:	да
Анимация:	да. Читать о анимированном Попробуй
Версия:	CSS2
Синтаксис JavaScript:	объект . style.borderSpacing=»15px» Попробуй

Поддержка браузера

Числа в таблице указывают первую версию браузера, которая полностью поддерживает это свойство.

Недвижимость
интервал между границами	1,0	8,0	1,0	1,0	4,0

Синтаксис CSS

border-spacing: length |initial|inherit;

Значения свойств

Значение	Описание	Демо
длина длина	Задает расстояние между границами соседних ячеек в пикселях, см и т. д. Отрицательные значения не допускаются. Если указано одно значение, оно определяет как горизонтальный, так и вертикальный интервал между ячейками Если указаны два значения, первое задает интервал по горизонтали, а второе — интервал по вертикали	Демонстрация ❯
начальный	Устанавливает для этого свойства значение по умолчанию. Читать о начальный
наследовать	Наследует это свойство от родительского элемента. Читать о унаследовать

Связанные страницы

Учебник по CSS: Таблица CSS

Ссылка на DOM HTML: свойство borderSpacing

❮ Предыдущая Полное руководство по CSS Далее ❯

ВЫБОР ЦВЕТА

Лучшие учебники

Учебник HTML
Учебник CSS
Учебник JavaScript
Учебник How To
Учебник SQL
Учебник Python
Учебник по W3.CSS
Учебник по Bootstrap
Учебник по PHP
Учебник по Java
Учебник по C++
Учебник по jQuery

Лучшие ссылки

HTML Reference
CSS Reference
JavaScript Reference
SQL Reference
Python Reference
W3.CSS Reference
Bootstrap Reference
PHP Reference
HTML Colors
Java Reference
Angular Reference
jQuery Reference

902 89 лучших примеров Примеры HTML
Примеры CSS
Примеры JavaScript
Примеры инструкций
Примеры SQL
Примеры Python
Примеры W3.

Расстояние между блоками css: Как убрать отступы между блоками css

html — Отступы между блоками на flex

Зарегистрируйтесь или войдите

Отправить без регистрации

Отправить без регистрации

Пространство между — Tailwind CSS

Основы использования

Добавьте горизонтальное пространство между детьми

Добавьте вертикальное пространство между дочерними элементами

Изменение порядка дочерних элементов

Использование отрицательных значений

Ограничения

Невозможно объединить с разделенными утилитами

Применяя условно

Наведение, фокус и другие состояния

Контрольные точки и медиа-запросы

Использование пользовательских значений

Настройка вашей темы

Произвольные значения

html — Почему между элементами блока есть пробел?

Пример JSFiddle

Зарегистрируйтесь или войдите в систему

Опубликовать как гость

Опубликовать как гость

Свойство CSS border-spacing

Пример

Определение и использование

Поддержка браузера

Синтаксис CSS

Значения свойств

Связанные страницы

ВЫБОР ЦВЕТА

Лучшие учебники

Лучшие ссылки

Добавить комментарий Отменить ответ

Рубрики

Рубрики

Расстояние между блоками css: Как убрать отступы между блоками css

html — Отступы между блоками на flex

Зарегистрируйтесь или войдите

Отправить без регистрации

Отправить без регистрации

Пространство между — Tailwind CSS

​Основы использования

​Добавьте горизонтальное пространство между детьми

​Добавьте вертикальное пространство между дочерними элементами

​Изменение порядка дочерних элементов

​Использование отрицательных значений

​Ограничения

​Невозможно объединить с разделенными утилитами

​Применяя условно

​Наведение, фокус и другие состояния

​Контрольные точки и медиа-запросы

​Использование пользовательских значений

​Настройка вашей темы

​Произвольные значения

html — Почему между элементами блока есть пробел?

Пример JSFiddle

Зарегистрируйтесь или войдите в систему

Опубликовать как гость

Опубликовать как гость

Свойство CSS border-spacing

Пример

Определение и использование

Поддержка браузера

Синтаксис CSS

Значения свойств

Связанные страницы

ВЫБОР ЦВЕТА

Лучшие учебники

Лучшие ссылки

Добавить комментарий Отменить ответ

Рубрики

Рубрики

Основы использования

Добавьте горизонтальное пространство между детьми

Добавьте вертикальное пространство между дочерними элементами

Изменение порядка дочерних элементов

Использование отрицательных значений

Ограничения

Невозможно объединить с разделенными утилитами

Применяя условно

Наведение, фокус и другие состояния

Контрольные точки и медиа-запросы

Использование пользовательских значений

Настройка вашей темы

Произвольные значения