CODEWITHSUNDEEP
htmlcss
user1887686
user1887686

Reputation: 139

Add padding to horizontal scroll box

The following code works as it should, but I'd like to have some padding on the right to give some space between the text and the border. The padding: 5px, puts padding on the top, left and bottom, but not the right. Everthing I've tried failed. Any suggestions?

#h-scrollbox {
    overflow-x: scroll;
    white-space:nowrap;
    width:100%;
    height:100%;
    padding: 5px;
    border: 1px solid #7a110f;
}

This code give me both a vertical and horizontal scroll bar, but no right margin. Putting it in a wrapper doesn't help.

c-scrollbox {

overflow-x: scroll;
white-space:nowrap;
width:100%;
height:100px;
padding: 5px;
border: 1px solid #000000; }

Any suggestions?

Upvotes: 1

Views: 6671

Answers (4)

zork media
zork media

Reputation: 972

I suggest to wrap your #h-scrollbox into a container:

<div class="container">
  <div id="h-scrollbox">
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean
    commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus 
    et magnis dis parturient montes, nascetur ridiculus mus. Donec quam 
    felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla 
    consequat massa quis enim. Donec pede justo, fringilla vel, aliquet 
    nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, 
    venenatis vitae, justo.</p>
 </div>
</div>

CSS:

container {
width:90%; /* any value you like */
padding: 5px;
overflow:hidden;
border: 1px solid #7a110f;
}

#h-scrollbox {
overflow-x: scroll;
white-space:nowrap;
width: 100%;
height:100%;
}

See the Fiddle.

Upvotes: 1

EdenSource
EdenSource

Reputation: 3387

Your padding right will only be visible after having scrolled to the right if content is overflowing:

Try to add a wrapper arround your scrollable element in order to add more space :

#h-scrollbox-wrapper {
    width:100%;
    border: 1px solid #7a110f;
    padding: 5px;
    box-sizing:border-box;
}
#h-scrollbox {
    overflow-x: scroll;
    white-space:nowrap;
    width:100%;
    height:100%;
    padding: 5px;
    box-sizing:border-box;
}

Live exemple

Upvotes: 1

Daniel Moreira
Daniel Moreira

Reputation: 437

As we can see here: http://www.w3schools.com/css/css_padding.asp

padding: 25px 50px 75px 100px;

  • top padding is 25px
  • right padding is 50px
  • bottom padding is 75px
  • left padding is 100px

padding: 25px 50px 75px;

  • top padding is 25px
  • right and left paddings are 50px
  • bottom padding is 75px

padding: 25px 50px;

  • top and bottom paddings are 25px
  • right and left paddings are 50px

padding: 25px;

  • all four paddings are 25px

Upvotes: -1

Luckyn
Luckyn

Reputation: 563

padding-right:5px;

Or if you want 5 everywhere and 10 on right :

padding: 5px 10px 5px 5px;

Upvotes: 1

Related Questions