如何分别CSS边框间距（或）填充背景图像？答案

【问题标题】：How to CSS border spacing (or) padding background image separately?如何分别CSS边框间距（或）填充背景图像？
【发布时间】：2013-12-02 17:03:30
【问题描述】：

我的 Wordpress (TwentyTwelve) 导航菜单效果很好，但在设计方面我想这样做，但不能；

导航没有背景（清晰，我们看到页面背景）=完成
li aborder-right 1px solid = done
li 悬停背景图片，不重复，底部居中 = 完成

所以问题是：我的 bg 图像离导航文本太近了...但是如果我添加填充或行高，那么右边框会变得太长。

那么如何在导航文本下添加间距，以便我的背景图像（悬停）变低，但右边框线不会变长？

如果有帮助，请查看我的 CSS 代码

.main-navigation li a {
color: #fff;
line-height: 1.0;
text-transform: uppercase;
white-space: nowrap;
    background:;
padding:0 15px 10px 15px; 
margin:0;
border-right:#8fbf3d 1px solid;
}

.main-navigation li a:hover {
color: #fff;
background:url('http://www.mysite.com/wp-content/themes/myown/images/bg-nav-hover.png') no-repeat bottom center;
}

.main-navigation .current-menu-item > a,
.main-navigation .current-menu-ancestor > a,
.main-navigation .current_page_item > a,
.main-navigation .current_page_ancestor > a {
color: #8fbf3d;
font-weight: bold;
background:url('http://www.mysite.com/wp-content/themes/myown/images/bg-nav-hover.png') no-repeat bottom center;
}

【问题讨论】：

标签： css wordpress menu navigation background-image

【解决方案1】：

你可以使用 CSS；

background-position: 10px 10px;

例如是 X 和 Y，您也可以按百分比计算。

你也可以；

background-position: center center;

或

background-position: right top;

例如。

编辑------ 我认为您的顺序错误，而不是底部中心使用中心底部，试试；

background:url('http://www.mysite.com/wp-content/themes/myown/images/bg-nav-hover.png') no-repeat center bottom;

【讨论】：

谢谢，但它不适用于这个例子。这是我的 CSS 代码 - 右边框始终可见 - 底部 bg 图像仅在 Hover 和 Current 上可见 ...我在上面添加了我的 css 代码
@revv86 CSS 代码很奇怪。无论如何，我说的是背景属性而不是边框，因为我知道你的问题是关于这个
对不起，它保存了我的评论太快了。见上面的css代码，不错，谢谢:-)
谢谢，我确实改变了中心底部，（已经在我的 Chrome 中工作了）。对我的问题/问题有任何想法吗？ :-)
它现在应该可以工作了！我的意思是，你放置了一个无效的 x 坐标（底部）所以被忽略了，你不能用这个解决它吗？

【解决方案2】：

仍然没有找到执行此操作的神奇方法...但我找到了可行的替代方法

删除了右边框
添加了一个看起来像右边框线的背景图像（但它是 jpeg）并将其右对齐
添加了我之前的 padding-bottom

工作！

【讨论】：