Bottom padding of an unknown-size text inside a Div

Question

Here I want to have a text padding/margin on the bottom part of my Div, to have a more organized and tidier look.

I want it to be flexible and handle to an unknown

Answer 1

You may hack it with a sticky position element that will define you margin:

.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>

A more generic code would be to add both pseudo element and remove the margin from 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>

The latter will also work if you want to consider scroll:

.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>

---

You can also limit the height of inner div like below:

.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>