Question

I have a pre element with the following styles:

pre {
    background: #555;
    background-image: -webkit-linear-gradient(#555 50%, #505050 50%);
    background-image:    -moz-linear-gradient(#555 50%, #505050 50%);
    background-image:     -ms-linear-gradient(#555 50%, #505050 50%);
    background-image:      -o-linear-gradient(#555 50%, #505050 50%);
    background-image:         linear-gradient(#555 50%, #505050 50%);
    background-position: 0 0;
    background-repeat: repeat;
    background-size: 4.5em 4.5em;
    color: #fff;
    font-size: .8em;
    line-height: 2.25;
    margin: 0 -2.25em 2.25em;
    overflow: auto;
    padding: 2.25em;
}

Why, when scrolling the pre element, is the right padding being ignored? I don’t want long lines to wrap, I want this behavior (it is not expected behaviour based on the specification, but seems to work in webkit): http://jsfiddle.net/joshnh/Ly5kz/

Here is a link to a live example: http://joshnh.com/2012/08/14/making-a-pure-css-featured-image-slider/#step1

Answer 1

That’s not quite how padding works. If your content is being forced past the edge of the box it will continue on without being covered by the background. Padding is room around the inner section of the box. All text that fits in the box will have x amount of space between it and the box edge.

In order to have a padding-like matte/box/border you’ll need to have a wrapper div that has the border and padding and add your other styles to the pre.

http://jsfiddle.net/ktJ3g/