CSS Sprite 菜单按钮与 CSS 之间的空间

【问题标题】：space between CSS Sprite menu buttons with CSSCSS Sprite 菜单按钮与 CSS 之间的空间
【发布时间】：2012-02-24 02:04:00
【问题描述】：

我有一个垂直的 CSS 精灵菜单。

我想在每个垂直按钮之间实现（例如）3 像素空间。是否可以使用 CSS 创建这些空间？

或者是使用所有按钮调整 Sprite 大小并在 CSS 文件中设置所有新位置的唯一选项？

【问题讨论】：

嘿，有什么问题吗？图像是否被截断，或者您是否试图在元素之间创建空间？ CSS 无法更改图像。

标签： css css-sprites

【解决方案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;
}

并从您的html 中删除<br>

【讨论】：

【解决方案2】：

是的，这是可能的。

假设每个按钮独立于其他按钮使用背景，您可以简单地在每个按钮上放置一个边距：

例如：

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

【讨论】：