Precyzyjne liczenie rozmiarów kontenerów

Question

1. Dlaczego Inspector zaimplementowany w Developer Tools przeglądarki Mozilla Firefox [Ctrl+Shift+K] zwraca wysokość kontenera równą 80.2, pomimo że wysokość obrazka ustawiona jest na 80px?

<div class="decoration">
    <img src="img/image.svg">
</div>

.decoration
{
    text-align: center;
    line-height: 80px;
}

.decoration img
{
    height: 80px;
    width: auto;
}

2. W jaki sposób policzyć rozmiar następującego kontenera, zakładając że plik CSS został zresetowany?

<div class="content">
    <h1>Nagłówek</h1><br>
    Tekst pod nagłówkiem   
</div>

body
{
 font-size: 30px;
}

.content
{
 font-size: 0.6em;
 line-height: 0.8em;
 padding: 20px 0;
}

.content h1
{
 font-size: 0.7em;
}

Nie wiem jak w tym przypadku będzie interpretowana wartość dla line-height. Oczywiście Inspector pokazuje mi łączną wysokość jako liczbę z wartością po przecinku.

Answer 1

Dzieje się tak, ponieważ <img> jest traktowany jako element inline, jak litery.
Możesz to naprawić dodając do styli regułę img { display: block; }, ale wyśrodkować już musisz nadając szerokość i margin: 0 auto;

Gdybyś potrzebował więcej informacji: https://stackoverflow.com/questions/5804256/image-inside-div-has-extra-space-below-the-image

Comments

Zapomniałem dodać, że wiem o tym i dlatego line-height ustawiłem na wysokość obrazka (dopisałem ten parametr w pierwszej wiadomości). Pomimo tego że przerwa zniknęła (taka jak ta na screenie z pierwszego postu ze SO), to Inspector nadal pokazuje 80.2 zamiast 80.

---

https://codepen.io/anon/pen/LxaeVd

jeżeli koniecznie chcesz wyświetlać img jako inline to dodaj do styli regułę:

.decoration img {vertical-align:bottom;} - może to pomoże ?