Home How to add padding on a container so that a scrollable content won't touch the top and bottom borders?

Questions

How to add padding on a container so that a scrollable content won't touch the top and bottom borders?

October 8, 2024

The issue is, I can’t figure out how to make the top and bottom padding work so that the scrollable content won’t touch the top and bottom borders when scrolling.

I’ve tried several methods I can think of, such as adding an outside container element, but didn’t work. Also tried the opposite of adding container inside.

Here’s the code in question:

<style>
  .container {
    height: 100px;
    width: 300px;
    overflow-y: scroll;
    padding: 10px;
    background-color: black;
    color: white;
  }
</style>

<div class="container">
  <li>dogs</li>
  <li>dogs</li>
  <li>dogs</li>
  <li>dogs</li>
  <li>dogs</li>
  <li>dogs</li>
  <li>dogs</li>
  <li>dogs</li>
  <li>dogs</li>
  <li>dogs</li>
  <li>dogs</li>
  <li>dogs</li>
  <li>dogs</li>
  <li>dogs</li>
  <li>dogs</li>
</div>

I simply want to add a padding there that will prevent the content touching border.

Any ideas would be really appreciated! Thank you!

>Solution :

If I understand you correctly, you can try using pseudo-elements with display: sticky as indents.

Example below:

.container {
  height: 100px;
  width: 300px;
  padding: 0px 10px;
  overflow-y: scroll;
  background-color: black;
  color: white;
}

.container:before,
.container:after {
  content: '';
  display: block;
  position: sticky;
  width: 100%;
  height: 10px;
  background: inherit;
  left: 0px;
}

.container:before {
  top: 0px;
}

.container:after {
  bottom: 0px;
}

<div class="container">
  <li>dogs</li>
  <li>dogs</li>
  <li>dogs</li>
  <li>dogs</li>
  <li>dogs</li>
  <li>dogs</li>
  <li>dogs</li>
  <li>dogs</li>
  <li>dogs</li>
  <li>dogs</li>
  <li>dogs</li>
  <li>dogs</li>
  <li>dogs</li>
  <li>dogs</li>
  <li>dogs</li>
</div>