Для того чтобы текст внутри блоков начинался на одной линии и был симметричен заголовкам, можно использовать несколько подходов с CSS. Вот один из возможных способов:
### HTML Структура
Предположим, у вас есть следующая структура HTML:
```html
<div class="cart-item">
<h3 class="item-title">Заголовок 1</h3>
<p class="item-description">Описание товара 1</p>
</div>
<div class="cart-item">
<h3 class="item-title">Заголовок 2</h3>
<p class="item-description">Описание товара 2</p>
</div>
```
### CSS Стили
1. Используйте `display: flex`, чтобы разместить заголовок и описание в одном ряду.
2. Установите одинаковое значение для отступов, чтобы выровнять текст.
Вот пример CSS:
```css
.cart-item {
display: flex;
flex-direction: column; /* Размещаем элементы вертикально */
margin-bottom: 20px; /* Отступ между элементами */
}
.item-title {
margin: 0; /* Убираем отступы по умолчанию */
}
.item-description {
margin: 0; /* Убираем отступы по умолчанию */
padding-left: 20px; /* Отступ, чтобы выровнять под заголовком */
}
```
### Дополнительные рекомендации
- Если у заголовков есть разное количество текста и вы хотите, чтобы все описания начинались на одной линии, вам, возможно, придется использовать фиксированную ширину или `flexbox` с дополнительными свойствами.
- Вы также можете использовать свойства `text-align` для выравнивания текста внутри блоков.
- Если доступно, рассмотрите возможность использования CSS Grid для более сложной структуры.
### Пример с Grid:
```css
.cart-item {
display: grid;
grid-template-columns: 1fr;
gap: 10px;
}
.item-title {
margin: 0;
/* Дополнительные стили для заголовка */
}
.item-description {
margin: 0;
/* Дополнительные стили для описания */
padding-left: 20px; /* Отступ для выравнивания */
}
```
Этот подход позволит вам настроить свойство `padding-left`, чтобы выровнять текст описания с заголовками, при этом сохраняя единообразие между элементами.