如何减少最小顶部填充？

Question

我正在尝试使用CSS3 ::之前的伪元素来复制Facebook的通知blob。我添加了一个最大高度值，我尝试的一切都不足以减少数字和框开头之间的空间。关于如何减少/消除它的任何想法？

代码：

HTML: <li notificaciones="3">[...]
SCSS:
*[notificaciones]:not([notificaciones="0"]){
&::before{
    content: attr(notificaciones);
    position: absolute;
    color: $color-cajas-notificaciones-texto;
    background-color: $color-cajas-notificaciones-fondo;
    max-width: 25px;
    font-size: 16px;
    font-family: 'lucida grande',tahoma,verdana,arial,sans-serif;
    font-weight: 800;
    height: 20px;
    float: left;
    z-index: 999;
    width: 20px;
    text-align: center;
    vertical-align: top;
    top: 0px;
    padding: 0 1px;
    color: white;
    text-shadow: 0px 0px 1px;
    background-color: #f03d25;
    border: 1px solid #d83722;
    border-bottom: 1px solid #c0311e;
    border-top: 1px solid #e23923;
    border-radius: 2px;
    box-shadow: 0 1px 0 rgba(0, 39, 121, 0.77);
    display: block; 
}

Answer 1

我不明白问题，但也许你想要这样

http://jsfiddle.net/zxshz/36/

<ul>
    <li data="3"></li>
    <li data="7"></li>
    <li data="15"></li>
</ul>

/ * css * /

ul{
    width: 250px;
}

li{
    list-style: none;
    float: left;
    margin-right: 8px;
    width: 18px;
    height: 18px;
    background: #9c0;
    position: relative;
}

li:after{
    content:attr(data);
    padding: 1px 2px 2px 3px;
    position: absolute;
    background: red;
    right: -3px;
    top: -5px;
    font-weight: bold;
    text-align: center;
    font-size: 9px;
    border-radius:2px ;
    color: #fff;
}

li:nth-child(1){
    background: #fff url(https://dl.dropboxusercontent.com/u/77028632/sarhov.com/fb.png) 0 0 no-repeat;
}


li:nth-child(2){
    background: #fff url(https://dl.dropboxusercontent.com/u/77028632/sarhov.com/fb.png) 0 -58px no-repeat;
}

li:nth-child(3){
    background: #fff url(https://dl.dropboxusercontent.com/u/77028632/sarhov.com/fb.png) 0 -29px no-repeat;
}

我无法理解你的问题是什么，请把你的代码放好

Answer 2

这只是提到关于Line Height Calculations

的官方文件的问题

line-height: /*same as height property*/
vertical-align: top;