Как добавить отступы в контейнер, чтобы прокручиваемый контент не касался верхней и нижней границ? ⇐ CSS

[Anonymous]

Проблема в том, что я не могу понять, как заставить работать верхнее и нижнее отступы, чтобы прокручиваемый контент не касался верхней и нижней границ при прокрутке.
Я попробовал несколько методов, которые только мог придумать, например добавление внешнего элемента контейнера, но это не сработало. Также попробовал добавить контейнер внутрь.
Вот код, о котором идет речь:

< div class="snippet-code">

Код: Выделить всё

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



[*]dogs
[*]dogs
[*]dogs
[*]dogs
[*]dogs
[*]dogs
[*]dogs
[*]dogs
[*]dogs
[*]dogs
[*]dogs
[*]dogs
[*]dogs
[*]dogs
[*]dogs

[img]https: //i.sstatic.net/zMDoRw5n.png[/img]

Я просто хочу добавить туда отступ, который не позволит содержимому касаться границы.
Любые идеи будут оценены по достоинству! Спасибо!

Подробнее здесь: https://stackoverflow.com/questions/790 ... ouch-the-t