0

.text-content {
  width: 600px;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}

.title {
  font-weight: 700;
  font-size: 36px;
}

.paragraph {
  font-size: 16px;
}
<div class="text-content">

  <h2 class="title">Lorem ipsum, dolor sit amet consectetur adipisicing elit</h2>
  
  <p class="paragraph">Lorem ipsum dolor sit amet consectetur adipisicing elit. Quae,
  nesciunt iusto, vero neque harum accusamus iste unde illum ratione voluptates perferendis
  autem sunt eius aspernatur animi a eligendi labore cupiditate.</p>
  
</div>

Нужно добавить отступ 50px между Заголовком и Параграфом (которые расположены горизонтально в flex-контейнере) за счет уменьшения Параграфа (а не Заголовка). Плюс нужно уместиться в ширину 600px - нельзя увеличить

Пробовал:

  • gap: 50px (не подходит - уменьшается заголовок)
  • margin-right: 50px для заголовка (не подходит - уменьшается заголовок)
  • margin-left: 50px для параграфа (просто не работает - никакого отступа даже не появляется)
  • flex-basis для заголовка + gap: 50px (снова уменьшает заголовок - я уже перестал понимать как работает basis)
  • flex-basis для заголовка + margin-right: 50px (снова уменьшает заголовок)
  • flex-basis для параграфа + margin-left: 50px (никакой реакции)
  • пробовал читать про семантические отступы margin-block-start и т.д. - вроде не мой случай
  • пробовал flex-inline-ы на крайний случай
  • менял display-и и параграфу, и заголовку

Знаю, что можно использовать костыль через обертку в div-ы, но это не дело((

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

1
  • Попробуйте свойства flex-shrink и flex-basis
    – Sergey K.
    30 янв в 7:55

1 ответ 1

0

.text-content {
  width: 600px;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}

.title {
  font-weight: 700;
  font-size: 36px;
  min-width: 230px;
}

.paragraph {
  font-size: 16px;
  padding-left: 50px;
}
<div class="text-content">

  <h2 class="title">Lorem ipsum, dolor sit amet consectetur adipisicing elit</h2>
  
  <p class="paragraph">Lorem ipsum dolor sit amet consectetur adipisicing elit. Quae,
  nesciunt iusto, vero neque harum accusamus iste unde illum ratione voluptates perferendis
  autem sunt eius aspernatur animi a eligendi labore cupiditate.</p>
  
</div>

1
  • Действительно, работает в редакторе Но на моей странице это НЕ работает. Этот flex-контейнер находится внутри ячейки grid (если это важно)
    – Ivan Post
    30 янв в 10:07

Ваш ответ

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

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.