Нижний отступ текста неизвестного размера внутри Div

Question

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

Я хочу, чтобы он был гибким и обрабатывал текст неизвестного размера.

.container {
  width: 180px;
  height: 140px;
  background-color: #777;
  overflow: hidden;
  /*padding-bottom: 10px; */
}

.inner {
  /* height: 134px;   */
}

p {
  margin-bottom: 10px;
}

<div class="container">
  <div class="inner">
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Impedit rerum quos molestiae ab a mollitia hic ea, provident odio beatae necessitatibus accusantium voluptate et aliquam exercitationem recusandae non deleniti officiis architecto eveniet, consectetur
      veniam dignissimos accusamus quaerat! Reiciendis tenetur similique necessitatibus odit eveniet, reprehenderit quibusdam eaque est, quidem facere nostrum autem totam porro deleniti? Porro laborum earum itaque, fuga rerum eum dolores facilis dolorum
      velit vero illum eveniet, perferendis excepturi officiis error officia modi libero voluptatum autem quod eos ipsum. Quod accusantium possimus nesciunt expedita, eos ducimus perferendis delectus dicta similique voluptas modi, ullam enim repellendus
      consequuntur incidunt atque natus reprehenderit odio, id quia vero. Obcaecati, nulla. Perferendis, dolores. Voluptatibus praesentium porro non blanditiis odit doloribus labore inventore voluptas facere!</p>
  </div>
</div>

Answer 1

Вы можете взломать его с помощью липкого элемента позиции, который будет определять вашу маржу:

.container {
  width: 180px;
  height: 140px;
  background-color: #777;
  overflow: hidden;
}

.container:after {
  content: "";
  display: block;
  height: 15px;
  position: sticky;
  bottom: 0;
  background: inherit;
}

<div class="container">
  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Impedit rerum quos molestiae ab a mollitia hic ea, provident odio beatae necessitatibus accusantium voluptate et aliquam exercitationem recusandae non deleniti officiis architecto eveniet, consectetur
    veniam dignissimos accusamus quaerat! Reiciendis tenetur similique necessitatibus odit eveniet, reprehenderit quibusdam eaque est, quidem facere nostrum autem totam porro deleniti? Porro laborum earum itaque, fuga rerum eum dolores facilis dolorum
    velit vero illum eveniet, perferendis excepturi officiis error officia modi libero voluptatum autem quod eos ipsum. Quod accusantium possimus nesciunt expedita, eos ducimus perferendis delectus dicta similique voluptas modi, ullam enim repellendus
    consequuntur incidunt atque natus reprehenderit odio, id quia vero. Obcaecati, nulla. Perferendis, dolores. Voluptatibus praesentium porro non blanditiis odit doloribus labore inventore voluptas facere!</p>
</div>

Более общий код c будет заключаться в добавлении псевдоэлементов и удалении поля из p

.container {
  width: 180px;
  height: 140px;
  background-color: #777;
  overflow: hidden;
}

.container:before,
.container:after {
  content: "";
  display: block;
  height: 15px;
  position: sticky;
  top:0;
  bottom: 0;
  background: inherit;
}

p {
  margin: 0;
}

<div class="container">
  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Impedit rerum quos molestiae ab a mollitia hic ea, provident odio beatae necessitatibus accusantium voluptate et aliquam exercitationem recusandae non deleniti officiis architecto eveniet, consectetur
    veniam dignissimos accusamus quaerat! Reiciendis tenetur similique necessitatibus odit eveniet, reprehenderit quibusdam eaque est, quidem facere nostrum autem totam porro deleniti? Porro laborum earum itaque, fuga rerum eum dolores facilis dolorum
    velit vero illum eveniet, perferendis excepturi officiis error officia modi libero voluptatum autem quod eos ipsum. Quod accusantium possimus nesciunt expedita, eos ducimus perferendis delectus dicta similique voluptas modi, ullam enim repellendus
    consequuntur incidunt atque natus reprehenderit odio, id quia vero. Obcaecati, nulla. Perferendis, dolores. Voluptatibus praesentium porro non blanditiis odit doloribus labore inventore voluptas facere!</p>
</div>

Последний также будет работать, если вы хотите рассмотреть прокрутку:

.container {
  width: 180px;
  height: 140px;
  background-color: #777;
  overflow: auto;
}

.container:before,
.container:after {
  content: "";
  display: block;
  height: 15px;
  position: sticky;
  top:0;
  bottom: 0;
  background: inherit;
}

p {
  margin: 0;
}

<div class="container">
  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Impedit rerum quos molestiae ab a mollitia hic ea, provident odio beatae necessitatibus accusantium voluptate et aliquam exercitationem recusandae non deleniti officiis architecto eveniet, consectetur
    veniam dignissimos accusamus quaerat! Reiciendis tenetur similique necessitatibus odit eveniet, reprehenderit quibusdam eaque est, quidem facere nostrum autem totam porro deleniti? Porro laborum earum itaque, fuga rerum eum dolores facilis dolorum
    velit vero illum eveniet, perferendis excepturi officiis error officia modi libero voluptatum autem quod eos ipsum. Quod accusantium possimus nesciunt expedita, eos ducimus perferendis delectus dicta similique voluptas modi, ullam enim repellendus
    consequuntur incidunt atque natus reprehenderit odio, id quia vero. Obcaecati, nulla. Perferendis, dolores. Voluptatibus praesentium porro non blanditiis odit doloribus labore inventore voluptas facere!</p>
</div>

Вы также можете ограничить высоту внутреннего div, как показано ниже:

.container {
  width: 180px;
  height: 140px;
  overflow: hidden;
  background-color: #777;
}

.inner {
  height:calc(100% - 2*15px);
  overflow: hidden;
  margin:15px 0;
}
p {
  margin:0;
}

<div class="container">
  <div class="inner">
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Impedit rerum quos molestiae ab a mollitia hic ea, provident odio beatae necessitatibus accusantium voluptate et aliquam exercitationem recusandae non deleniti officiis architecto eveniet, consectetur
      veniam dignissimos accusamus quaerat! Reiciendis tenetur similique necessitatibus odit eveniet, reprehenderit quibusdam eaque est, quidem facere nostrum autem totam porro deleniti? Porro laborum earum itaque, fuga rerum eum dolores facilis dolorum
      velit vero illum eveniet, perferendis excepturi officiis error officia modi libero voluptatum autem quod eos ipsum. Quod accusantium possimus nesciunt expedita, eos ducimus perferendis delectus dicta similique voluptas modi, ullam enim repellendus
      consequuntur incidunt atque natus reprehenderit odio, id quia vero. Obcaecati, nulla. Perferendis, dolores. Voluptatibus praesentium porro non blanditiis odit doloribus labore inventore voluptas facere!</p>
  </div>
</div>