Css расстояние между элементами списка: Как задать расстояние между пунктами списка?

Настройка отступа в маркированном или нумерованном списке с помощью линейки

PowerPoint для Microsoft 365 PowerPoint 2021 PowerPoint 2019 PowerPoint 2016 PowerPoint 2013 PowerPoint 2010 PowerPoint 2007 Еще…Меньше

Чтобы настроить отступ в маркированном или нумерованном списке на слайде в презентации, откройте образец слайдов и следуйте приведенным ниже инструкциям. Чтобы отобразить его, на вкладке «Вид» в группе «Представления презентации» нажмите кнопку «Слайд-шоу».

1. Если линейка не отображается, на вкладке Вид в группе Показать выберите пункт Линейка.

2. Выделите маркированный или нумерованный текст, который нужно изменить.

   Если этот текст содержит несколько уровней маркированных или нумерованных элементов, на линейке отобразятся маркеры отступа для каждого уровня.

   1 Маркер отступа первой строки, отображающий положение отступа для маркера или номера

   2 Маркер отступа слева, показывающий положение отступа для текста в списке

3. Выполните одно или несколько из указанных ниже действий.

   • Чтобы изменить положение маркеров или номеров, перетащите маркер отступа первой строки.

   • org/ListItem»>

     Чтобы изменить положение текста, перетащите заостренную верхнюю часть маркера отступа слева.

   • Чтобы одновременно переместить оба отступа с сохранением взаимного расположения маркера (или цифр) и отступа слева, перетащите прямоугольную нижнюю часть маркера отступа слева.

4. Повторите действия 2 и 3 для каждого уровня маркеров и нумерации, а также для всех уровней текста, которые требуется изменить.

• Добавление маркеров или нумерации к тексту

• org/ListItem»>

  Увеличение и уменьшение отступов в тексте абзаца

• Отображение и скрытие линейки

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

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

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

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

01

02

03

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

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

01

02

03

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

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

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

01

02

03

<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 lets you conditionally apply utility classes in different states using variant modifiers. For example, use hover:space-x-8 to only apply the space-x-8 utility on hover.

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

For a complete list of all available state modifiers, check out the Hover, Focus, & Other States documentation.

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

You can also use variant modifiers to target media queries like responsive breakpoints, dark mode, prefers-reduced-motion, and more. For example, use md:space-x-8 to apply the space-x-8 utility at only medium screen sizes and above.

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

To learn more, check out the documentation on Responsive Design, Dark Mode and other media query modifiers.

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

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

По умолчанию в шкале 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',
      }
    }
  }
}

Дополнительные сведения о настройке темы по умолчанию смотрите в документации настройка темы.

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

If you need to use a one-off space-{x|y} value that doesn’t make sense to include in your theme, use square brackets to generate a property on the fly using any arbitrary value.

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

Learn more about arbitrary value support in the arbitrary values documentation.

html — Как установить вертикальное расстояние между элементами списка?

спросил

Изменено 2 месяца назад

Просмотрено 484 тыс. раз

Очевидно, что внутри элемента

вертикальный интервал между строками можно отформатировать с помощью атрибута line-height.

У меня вопрос: как в элементе

установить интервал по вертикали между элементами списка?
• HTML
• CSS
• HTML-списки

1

Вы можете использовать маржу. См. пример:

http://jsfiddle.net/LthgY/

 li{
  поле: 10px 0;
}
 

2

HTML

 

   
А
   
Б
   
С
   
Д
   
Э

 

CSS

 li:not(:last-child) {
    нижняя граница: 5px;
}
 

РЕДАКТИРОВАТЬ: Если вы не используете специальный регистр для последнего элемента li, после этого ваш список будет иметь небольшой интервал, который вы можете увидеть здесь: http://jsfiddle.net/wQYw7/

Теперь сравните это с моим решением: http:/ /jsfiddle.net/wQYw7/1/

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

6

Старый вопрос, но я думаю, что на него не было ответа. Я бы использовал соседний селектор братьев и сестер. Таким образом, мы пишем только «одну» строку CSS и учитываем пробел в конце или начале, которого не хватает в большинстве ответов.

 ли + ли {
  поле сверху: 10px;
}
 

3

Я бы склонялся к этому, благодаря поддержке IE8.

 ли{
    поле сверху: 10px;
    граница: 1px сплошной серый;
}
ли: первый ребенок {
    маржа сверху: 0;
}
 

JSFiddle

Добавьте поле к тегам li . Это создаст пространство между li , и вы можете использовать line-height , чтобы установить интервал между текстом в тегах li .

0

Чтобы применить ко всему списку, используйте

 ul.space_list li { margin-bottom: 1em; }
 

Затем в html:

 

А
Б

 

вы также можете использовать свойство line-height для ul

 ul {
  высота строки: 45px;
}
дел {
  граница: 2px сплошной черный;
} 

 <дел>
  <ул>
    
первая строка
    
вторая строка
    
третья строка