пространство между кнопками меню CSS Sprite с помощью CSS

Question

У меня есть вертикальное меню спрайтов CSS.

Я хотел бы реализовать (на примере) 3 пикселя между каждой из вертикальных кнопок. Можно ли создать это пространство с помощью CSS?

или это единственный вариант изменить размер Sprite со всеми кнопками и установить все новые позиции в файле CSS?

Answer 1

Да, он прост в использовании, но главная проблема с вашим markup.напишите так:

ul#menu {
    clear: both;
    float: right;
    list-style: none outside none;
    margin: 0;
    padding: 0;
}
#menu li {
    margin-bottom: 3px;
    margin-right: 10px;
    overflow: hidden;
    text-indent: -9999px;
}

и удалите <br> из вашего html

Answer 2

Да, это возможно.

Предполагая, что каждая кнопка использует фон независимо от других кнопок, вы можете просто наложить на каждую из них поле:

например:

#menu li{
   background: url(../urlToSprite) /* set positions elsewhere */
   margin-bottom:3px;
}