如何在span中添加底部填充

Question

得到一个跨度的链接，在该范围内我将从jquery添加一些新闻。但我希望它更小，并且有一点填充，所以它看起来像应用程序上的通知？

这是我得到的代码：

<a id="menyNavOptions" href="nyheter.php" >Nyheter<span style="margin-bottom: 30px; font-size: 0.8em;font-weight:bolder ; color: #ff0000!important; line-height:0.3em;" id="outPost"></span></a>

所以我想要的是一个带有右上角数字的链接

由于

Answer 1

display:block无济于事，因为它将具有全宽（100％）。使用display:inline-block;

http://jsfiddle.net/M5TKv/

但我不确定Padding bottom是否会做你想做的事。

我想你想这样做： http://jsfiddle.net/M5TKv/1/

Answer 2

尝试在CSS中添加display：inline-block，它应该按照您的预期行事：）

但我宁愿在链接上使用位置相对而在跨度上使用绝对位置。

.linkclass {
    position: relative;
}
.spanclass {
    position: absolute;
    top: -10px;
    right: 0;
}

Answer 3

添加display: inline-block; float: right;