如何使跨度元素的余量正确工作？

我有一个span元素，我希望出现在页面的右下角。为此，我使用了margin-right:10px。但它没有效果。在margin-left的作品。为什么是这样？以及如何使span元素出现在页面的右侧？如何使跨度元素的余量正确工作？

2013-03-10 Ashwin

保证金，权利是右边距。

如果你想对齐它的权利，你可以使用右：10px，如果位置是绝对的。

否则，你可以使用float：正确的

您也可以设置显示：inline-block的以跨度。

2013-03-10 05:58:21

@穆罕默德纳西尔：那么保证金是如何工作的？ – Ashwin 2013-03-10 05:59:12

因为它已经对齐左边的角落，所以当你设置边距时，左边的边缘对你来说是清晰可见的。当您设置边距时，边距右边也有效，但是因为它没有对齐，所以您看不到效果。 – 2013-03-10 06:06:54

我认为你要找的是float：right;

2013-03-10 05:58:00

试试这个（jsFiddle）

.right-corner { 
    float:right; 
}

或本（jsFiddle）

.right-corner { 
    position:absolute: 
    top:0; 
    right:0; 
}

是保证金右不起作用的原因是因为它只是给你的元素的右边缘不重新定位它。为了帮助你理解，如果你在margin-right之后加入了一些东西，那么它们之间就会有差距，这就是余量。

margin-left也这样做，它只是在左侧进行，因为元素是从左到右的位置，左侧的空白看起来像刚刚向右移动。

看看this little example试图了解。如果您不明白，您应该阅读CSS box model。

CSS box model, from www.w3.org/TR/CSS2/box.html

2013-03-10 05:58:13

为了完成@Tyriar答案，这里是一个小提琴也显示出你使用的text-align: right。为什么保证金可以存在但没有可观察到的效果。还如何使用clear属性浮动元素和/或浮动元素的容器一个clearfix后（两者都是没有必要在这里）

还有一个忠告：如果你不要使用绝对定位不是真的（真的）确定你想要达到什么以及如何实现;大多数情况下，这不是CSS问题的最佳解决方案。完全没有流量，其内容将显示在其他内容没有任何照顾...

2013-03-10 06:48:17 FelipeAls

但是文字对齐不适用于img，对吧？ – Ashwin 2013-03-22 01:56:58

父级控制其内容的水平对齐。'img'本身没有内容，所以是无效的afaik和对齐其父母将对齐图像（或文本替换，如果由于任何原因图像无法显示） – FelipeAls 2013-03-22 09:21:55

回答