안쪽에 여분의 마크 업없이 상단 및 하단에 패딩이있는 스크롤 가능한 div를 만드는 방법은 무엇입니까?

Question

I have created a fiddle 내 질문을 설명합니다. 기본적으로 위쪽과 아래쪽에 패딩이있는 스크롤 가능한 내용의 컨테이너가 필요합니다. [편집 :]이 패딩은 스크롤하는 동안 표시되어야하므로 주어진 시간에 가장자리에서 콘텐츠까지의 거리가 같아야합니다.

<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. */ 
}