CODEWITHSUNDEEP
csshtmlpadding
Nico Rodsevich
Nico Rodsevich

Reputation: 2575

How to reduce minimum top-padding?

I'm trying to copy the Facebook's notification's blobs by using CSS3 ::before pseudo-element. I added a maximum height value and everything I tried isn't enough to reduce the space between the number and the beginning of the box. Any ideas on how to reduce/eliminate it?

enter image description here

Code:

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; 
}

Upvotes: 0

Views: 258

Answers (2)

Hovhannes Sargsyan
Hovhannes Sargsyan

Reputation: 1083

I didn't understand question well, but maybe you want like this

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;
}

I can't understand what is your problem, put your code please

Upvotes: 2

Nico Rodsevich
Nico Rodsevich

Reputation: 2575

It's was just a matter of referring to the official documentantion on Line Height Calculations

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

Upvotes: 0

Related Questions