Как сделать красивые отступы в древе?

Для создания красивых отступов в древовидной структуре с помощью CSS можно использовать различные приемы. Вот несколько способов:

1. **Отступы с помощью отступов (margin)**:

    .tree {
        margin-left: 20px; /* задаем отступ слева */
        padding-left: 10px; /* задаем внутренний отступ слева для выравнивания текста */
    }
    
    .tree li {
        margin-top: 10px; /* задаем отступ сверху между элементами */
    }

2. **Использование псевдоэлемента ::before**:

    .tree li {
        position: relative;
    }
    
    .tree li::before {
        content: '';
        position: absolute;
        top: 0;
        left: -20px; /* отступ для разделителя */
        border-left: 1px solid #000; /* стиль разделителя */
        height: 100%; /* высота разделителя */
    }
    
    .tree li::before {
        width: 10px; /* ширина разделителя */
        margin-left: 10px; /* отступ для текста */
    }

3. **Использование flexbox**:

    .tree {
        display: flex;
        flex-direction: column;
    }
    
    .tree ul {
        margin-left: 20px; /* отступ для уровня */
        padding-left: 10px; /* внутренний отступ для текста */
    }
    
    .tree li {
        margin-top: 10px; /* отступ между элементами */
    }

4. **Использование grid**:

    .tree {
        display: grid;
        grid-template-columns: auto 1fr; /* задаем ширину столбцов */
    }
    
    .tree li {
        grid-column: 2; /* элемент второго столбца */
    }
    
    .tree li::before {
        content: '';
        border-left: 1px solid #000; /* стиль разделителя */
    }

Это лишь несколько способов создания красивых отступов в древовидной структуре с помощью CSS. Важно выбрать подходящий метод в зависимости от требуемого дизайна и структуры вашего дерева.