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

Question

我的 anchor 元素周围有边距。我想在边缘放置一张背景图片。你能做这个吗？它适用于填充，但想使用边距。注意 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 With Margin 之前 - 不起作用:

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 显示实际效果。

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

此代码将在维基百科 Logo 到达 #myDiv 边框时显示在左侧和底部裁剪掉的 Logo 。

#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