• Najnowsze pytania
  • Bez odpowiedzi
  • Zadaj pytanie
  • Kategorie
  • Tagi
  • Zdobyte punkty
  • Ekipa ninja
  • IRC
  • FAQ
  • Regulamin
  • Książki warte uwagi

Precyzyjne liczenie rozmiarów kontenerów

Object Storage Arubacloud
0 głosów
151 wizyt
pytanie zadane 15 lutego 2017 w HTML i CSS przez Benek Szeryf (91,210 p.)
edycja 15 lutego 2017 przez Benek

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.

1 odpowiedź

0 głosów
odpowiedź 15 lutego 2017 przez niezalogowany

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

komentarz 15 lutego 2017 przez Benek Szeryf (91,210 p.)

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.

1
komentarz 15 lutego 2017 przez niezalogowany

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 ?

Podobne pytania

0 głosów
1 odpowiedź 458 wizyt
pytanie zadane 27 października 2018 w C i C++ przez MAXIM7 Obywatel (1,990 p.)
+1 głos
1 odpowiedź 370 wizyt
pytanie zadane 6 lipca 2021 w HTML i CSS przez Szyszka Gaduła (3,490 p.)
+1 głos
4 odpowiedzi 51,314 wizyt
pytanie zadane 8 lutego 2017 w HTML i CSS przez husarbilu Początkujący (370 p.)

92,761 zapytań

141,685 odpowiedzi

320,482 komentarzy

62,105 pasjonatów

Motyw:

Akcja Pajacyk

Pajacyk od wielu lat dożywia dzieci. Pomóż klikając w zielony brzuszek na stronie. Dziękujemy! ♡

Oto polecana książka warta uwagi.
Pełną listę książek znajdziesz tutaj.

Akademia Sekuraka

Niedawno wystartował dodruk tej świetnej, rozchwytywanej książki (około 940 stron). Mamy dla Was kod: pasja (wpiszcie go w koszyku), dzięki któremu otrzymujemy 10% zniżki - dziękujemy zaprzyjaźnionej ekipie Sekuraka za taki bonus dla Pasjonatów! Książka to pierwszy tom z serii o ITsec, który łagodnie wprowadzi w świat bezpieczeństwa IT każdą osobę - warto, polecamy!

...