如何创建一个可滚动的div，顶部和底部都有填充，内部没有额外的标记？

Question

我制造了一个小提琴来说明我的问题。 基本上，我希望有一个带有可滚动内容的容器，该容器的顶部和底部都有填充。 [编辑：]滚动时该填充应该可见，以便在任何给定时间，您从边缘到内容的距离都相同。

<div class="container">
    <!-- pure content, no extra wrapper -->
    <h1>This is how I'd like it</h1>
    <p> ... </p>
</div>

我只能通过在容器内部添加一个额外的包装来达到这种效果。 有人知道不会引入其他元素的其他解决方法吗？

<div class="container">
    <!-- extra wrapper, me unhappy -->
    <div class="inner">
        <h1>This is how I can do it</h1>
        <p> ... </p>
    </div>
</div>

Answer 1

我能想到的最简单的解决方案是在与背景颜色相同的框周围添加一个粗边框，并相应地减小宽度/高度。 [边框厚度=所需的任一侧填充]＆[边框颜色=盒子的背景色]

Answer 2

尝试使用以下CSS。

.container {
    padding-top:10px;
    padding-bottom:10px;
    height: 80px; /* Set your desired value here */
    width: 200px; /* Set your desired value here */
    overflow-x: scroll; /* for horizontal scroll-bar */    
    overflow-y: scroll; /* for vertical scroll-bar */
    white-space: nowrap; /* needed only if you want to disable text-wrapping. */
}