Для создания эстетичных отступов в структуре дерева данных и настройки внутренних отступов в дочерних элементах можно использовать CSS. Вот несколько шагов, которые помогут вам достичь желаемого результата:
1. Добавьте внешние отступы для каждого уровня элементов. Например, вы можете установить отступ слева для каждого уровня дочерних элементов, чтобы создать визуальное разделение между уровнями и улучшить читаемость структуры данных.
```
.tree {
padding-left: 20px; /* отступ слева для каждого уровня элементов */
}
```
2. Чтобы изменение цвета фона при наведении распространялось на всю ширину элемента каждого дочернего элемента, а не только на его содержимое, можно добавить отступы для содержимого и фона элемента. Например, вы можете использовать `padding` для установки внутренних отступов внутри каждого элемента.
```
.tree-item {
padding: 10px; /* внутренние отступы для содержимого элемента */
}
.tree-item:hover {
background-color: lightgray; /* изменение цвета фона при наведении */
}
```
3. Не забудьте также установить `display: block;` для элементов, чтобы они правильно отображались как блочные элементы и занимали всю доступную ширину.
```
.tree-item {
display: block;
}
```
С помощью этих CSS свойств вы сможете создать эстетичные отступы в структуре дерева данных и настроить внутренние отступы в дочерних элементах так, чтобы изменение цвета фона распространялось на всю ширину элемента каждого дочернего элемента.