将背景图像定位到其自身元素的边缘 - 这可能吗？

Question

我有一个带有边距的锚项目。我想在边缘放置一个背景图像。你能做这个吗？它适用于填充，但想要使用边距。要注意 jquery 正在将 .active 类添加到链接中。也许使用 box-sizing？

HTML

<nav><a class="arrow_me" href="Page">Page</a><a href="Page">Page</a><a href="Page.aspx">Page</a><a href="Page" target="_blank">Page</a></nav>

在带边距的 Css 之前 - 不起作用：

nav {max-width: 960px; margin: 0 auto; padding:0 15px}
nav a {margin: 20px 35px 20px 0; color:#48718c; text-transform:uppercase;     text-decoration:none !important; font-size:11px; float:left}
nav a.arrow_me.active {background: url(../img/arrow.png) no-repeat 50% 35px;}
nav a:hover, nav a.active, #menuFilter a.current, #menuFilter a:hover {color:#cdcdce}

使用填充后 - 工作：

nav {max-width: 960px; margin: 0 auto; padding:0 15px}
nav a {padding: 20px 35px 20px 0; color:#48718c; text-transform:uppercase;      text-decoration:none !important; font-size:11px; float:left}
nav a.arrow_me.active {background: url(../img/arrow.png) no-repeat 50px 35px;}
nav a:hover, nav a.active, #menuFilter a.current, #menuFilter a:hover {color:#cdcdce}

Answer 1

不，当边距附加到元素时，它不能显示它的内容。

这是一个 Fiddle，显示了实际效果。

请注意，尽管背景图片更大，但不能超出边框。

当到达#myDiv 边界时，此代码将显示在左侧和底部被裁剪掉的 Wikipedia 徽标。

#myDiv {
    width:50px;
    height:50px;
    padding:10px;
    margin:20px;
    border:solid 1px red;
    background-image:url('http://upload.wikimedia.org/wikipedia/en/b/bc/Wiki.png');
}

填充可以在边框内显示背景图像，但边距只是元素和其他元素之间的强制空间。下面来看看CSS Box model

Answer 2

填充在里面，这就是它起作用的原因。

一个边距在外面，想象它在不可见的边框里。