Обновленный ответ:

Несколько раз отмечалось, что это неправильный ответ на этот вопрос, и я согласен. Когда этот ответ был написан, IE 9 был еще новым (около 8 месяцев), и многим разработчикам, включая меня, требовалось решение для ‹= IE 9. IE 9 — это когда IE начал поддерживать background-origin. Тем не менее, прошло более шести с половиной лет, поэтому вот обновленное решение, которое я настоятельно рекомендую вместо использования реальной границы. В случае, если ‹ требуется поддержка IE 9. Мой оригинальный ответ можно найти ниже демо-фрагмента. Он использует непрозрачную границу для имитации отступов для фоновых изображений.

#hello {
  padding-right: 10px;
  background-color:green;
  background: url("https://placehold.it/15/5C5/FFF") no-repeat scroll right center #e8e8e8;
  background-origin: content-box;
}

<p id="hello">I want the background icon to have padding to it too!I want the background icon twant the background icon to have padding to it too!I want the background icon to have padding to it too!I want the background icon to have padding to it too!</p>

Оригинальный ответ:

вы можете подделать его с рамкой 10px того же цвета, что и фон:

http://jsbin.com/eparad/edit#javascript,html,live

#hello {
   border: 10px solid #e8e8e8;
   background-color: green;
   background: url("http://www.costascuisine.com/images/buttons/collapseIcon.gif")
               no-repeat scroll right center #e8e8e8;
}

на самом деле это довольно легко сделать. Вы почти у цели, делаете то же, что и с background-position: right center;. Что на самом деле нужно в данном случае, так это что-то очень похожее. Преобразуем их в проценты. Мы знаем, что center=50%, так что это достаточно просто. Теперь, чтобы получить нужный отступ, вам нужно расположить фон следующим образом: background-position: 99% 50%.

Второй и более эффективный способ сделать это — использовать ту же идею background-position и просто использовать background-position: 400px (width of parent) 50%;. Конечно, этот метод требует статической ширины, но каждый раз будет давать одно и то же.

Метод 1 (99% 50%)
Метод 2 (400 пикселей 50%)

На самом деле для этого есть собственное решение, использующее четыре значения для background-position.

.CssClass {background-position: right 10px top 20px;}

Это означает 10 пикселей справа и 20 пикселей сверху. вы также можете использовать три значения, четвертое значение будет равно 0.

вы можете использовать background-origin:padding-box; а затем добавьте некоторые отступы, где хотите, например: #logo {background-image: url(your/image.jpg); background-origin:padding-box; padding-left: 15%;} Таким образом, вы прикрепляете изображение к блоку заполнения div, который содержит его, чтобы вы могли расположить его в любом месте.

На случай, если кому-то еще понадобится добавить отступ к чему-либо с помощью background-image и background-size: contains или cover, я использовал следующее: хороший способ сделать это. Вы можете заменить ширину границы на 10% или 2vw или на что угодно.

.bg-image {
    background: url("/image/logo.png") no-repeat center #ffffff / contain;
    border: inset 10px transparent;
    box-sizing: border-box;
}

Это означает, что вам не нужно определять ширину.

во-первых, чтобы быть немного подкаблучником, лучше НЕ использовать просто тег <background>. вместо этого используйте правильный, более конкретный тег <background-image>.

единственный известный мне способ сделать это — встроить отступ в изображение, расширив подложку. поскольку пустые пиксели не удаляются, у вас есть отступ прямо здесь. поэтому, если вам нужна граница 10 пикселей, создайте 10 пикселей пустых пикселей вокруг вашего изображения. это очень просто в Photoshop, Fireworks, GIMP и т. д.

я бы также рекомендовал попробовать формат PNG8 вместо умирающего GIF... намного лучше.

может быть альтернативное решение вашей проблемы, если бы мы знали немного больше о том, как вы его используете. :) это ВЫГЛЯДИТ, как будто вы пытаетесь добавить кнопку-аккордеон. это лучше всего поместить в HTML, потому что тогда вы можете ориентироваться на него с помощью JavaScript/PHP; что-то, что вы не можете сделать, если оно находится в фоновом режиме (по крайней мере, не просто). в таком случае вы можете чертовски стилизовать изображение, которое у вас есть в настоящее время в CSS, используя следующее:

#hello img { padding: 10px; }

WR!

Чтобы добавить пространство перед фоновым изображением, можно определить «ширину» элемента, который использует объект «фоновое изображение». А затем определить значение пикселя в свойстве background-position, чтобы создать пространство с левой стороны.

Например, у меня был сценарий, в котором я получил меню навигации, в котором перед элементом ссылки был маркер, а изображение маркера можно было изменить, если соответствующая ссылка переходит в активное состояние. Кроме того, активная ссылка также имела фоновый цвет для отображения, и этот фоновый цвет имел примерно 15 пикселей отступа как слева, так и справа от элемента ссылки (так что слева он также включает значок маркера ссылки).

В то время как padding-right выполняет цель растянуть фоновый цвет на 15 пикселей больше справа от текста ссылки. Отступ слева добавляет только пространство между текстом ссылки и маркером.

Поэтому я взял ширину объекта background-color из дизайна PSD (например, 82px) и добавил его к элементу li (в классе, созданном для отображения активного состояния), а затем установил значение background-position на 20px. В результате значок пули сместился внутрь с левого края. И это дало мне желаемый результат, оставив отступ перед значком пули, используемым в качестве фонового изображения.

Обратите внимание, что вам может потребоваться соответствующим образом настроить значения отступов / полей, которые могут использоваться либо для пробела между элементами ссылки, либо для интервала между значком маркера и текстом ссылки.