2 blocks with the same line-height and different font-size. A smaller font-size has a padding at the top. Where?

T

Timur2012-06-01 19:52:24

HTML

Timur, 2012-06-01 19:52:24

It is clearer and more convenient to look here jsfiddle.net/XAKEPEHOK/Ua6KZ/3/

it looks like this

Where does the indent in the date block come from?

Just in case, here is the code

.News { margin: 10px 0 10px; background: #d7f2ff;}
.News legend { display: block; background: #fff; border: 1px solid #BFCED6; padding: 0; margin: 0; height: 20px; }
.News legend span {display: inline-block; padding: 0 5px; margin: 0px; line-height: 20px;}
.News legend .snDate { font-size: 8px; background: #5fbeea; color: #fff;}
.News legend .snCaption { font-size: 14px; font-weight: bold; }

<!DOCTYPE html>
<html>
    <head><title>Проверка</title></head>
    <body>
    <fieldset class="News">
        <legend><span class="snDate">29-05-2012, 13:03</span> <span class="snCaption">Ну почему? Откуда берется отступ сверху в блоке с датой?</span></legend>
        Porttitor auctor lacus etiam ultricies lacus natoque urna hac, tristique, cursus. 
    </fieldset>    
    </body>

</html>

Reply

Answer the question

In order to leave comments, you need to log in

3 answer(s)

A

Andrey Kuntsevich, 2012-06-01
@titulusdesiderio

I don’t know where it comes from but you will be saved

vertical-align:top;

for these span
jsfiddle.net/titulus_desiderio/6kCYS/

E

egorinsk, 2012-06-02
@egorinsk

Although this has already been written 2 times, I will write a third. Whenever you write display: inline-block add a vertical-align line.

C

Chii, 2012-06-01
@Chii

Looked with 3D inspector (FF 12+)…
Mysticism!