css - 边距与固定位置元素中的位置

Question

一个小弹出窗口告诉我，我的浏览器中有一个新的 Twitter 关注者。我点击了 inspect element 来四处查看，当然我并不惊讶它是一个固定位置的元素，但 CSS 让我感到惊讶。

#spoonbill-outer {
position: fixed;
right: 0px;
bottom: 0px;
margin: 22px;
z-index: 10;
}

是否有使用边距而不是 right:22px、bottom:22px 的原因？

Answer 1

有趣的一点是，我尝试了两种方法，基本上两种方法都会导致相同的结果。

我想说这两种方法在最简单的例子中是等价的。

如果您查看 CSS 规范，可以根据指定或设置为自动的值来限制左/右偏移量和左/右边距以及宽度。

参见:http://www.w3.org/TR/CSS21/visudet.html#abs-non-replaced-width

但是，我发现很难想象指定偏移量与边距会有所不同的情况(可能有一种奇特的情况，但我无法想到它)。

body {
    margin: 0;
}
.popup {
    background-color: yellow;
    position: fixed;
    right: 0;
    bottom: 0;
    margin: 40px;
}
.popup-alt {
    background-color: lightblue;
    position: fixed;
    right: 40px;
    bottom: 40px;
}

<div class="popup">Yellow Popup Element</div>
<div class="popup-alt">Blue Popup Element</div>