Отображение изображения из графика facebook отображается в верхней части. Зачем?

Question

Почему, когда я устанавливаю изображение src из facebookфотография, изображение окрашено сверху (есть пустое место наверху)?

здесь HTML-код IMG

$('.raters-div').append("<div class='rater-img'><div class='rate-value'>"+value+ 
    "</div><img src='https://graph.facebook.com/"+user+"/picture' class='img123' /></div>"); 

стиль CSS

.rater-img{ 
    float: right; 
    background-color: red; 
    margin-right: 1px; 
    height: 30px; 
    width: 30px; 
    padding: 0px; 
    margin-top: 3px; 
} 
.img123{ 
    margin: 0px; 
    padding: 0px; 
    width:30px; 
    vertical-align: top; 
} 
.rate-value{ 
    top: 17px; 
    right: 16px; 
    position: relative; 
    color: #fff; 
    font-size: 11px; 
    font-weight: bold; 
    padding: 1px; 
    text-align: center; 
    height: 11px; 
    width: 11px; 
    z-index: 500; 
    background-color: #000; 
} 

Answer 1

Может быть, потому, что вы используете vertical-align: top и ваш образ по умолчанию display: inline? Удалите эту линию или установите ее на vertical-align: middle, чтобы центрировать ее по вертикали.

Пустое пространство может быть потому, что .rate-value имеет padding: 1px;