Domyślny margines nad i pod tekstem - jak usunąć?

Question

Domyślnie pod tekstem i nad tekstem powstaje mi duży prześwit który jest domyślny, jak go usunąć? Dokładnie widać go przy zaznaczeniu. Nie wiem czy ma to jakiś wpływ ale czcionki biorę z google fonts, przy domyślnej czcionce tego problemu nie zawuażyłem. 

Comments

jakiś kod?

---

<div class="name">ELON MUSK</div>

.name{
        font-size: 40px;
	font-family: 'Changa', sans-serif;
}

Answer 1

Marginesy domyślnie są chyba na nagłówkach a możesz je prosto usunąć poprzez wyzerowanie wartości domyślnych:

h1,h2,h3,h4,h5,h6 {
    margin: 0;
}

Tak czy inaczej możesz bez problemu podejrzeć w DevTools'ach poprzez PPM > Zbadaj która dokładnie klasa/element robi Ci taki numer.

Comments

Zerowe marginesy nagłówków nie działają. W DevTools też nic nie znalazłem dlatego dla pewności stworzyłem czystą stonę z tekstem. Jest tak samo.

<div class="name">ELON MUSK</div>

.name{
        font-size: 40px;
	font-family: 'Changa', sans-serif;
}

 

---

Nie ma opcji, musi to być gdzieś w DevTools'ach, może to być też padding elementu nadrzędnego.

---

Wrzuć strone na https://codepen.io/ 

---

https://codepen.io/Deviee/pen/eYpRJGp

---

Wygląda na to, że ta czcionka jest jakaś specyficzna, tych odstępów możesz się pozbyć ustawiając ujemny margines:

.name{
    font-size: 40px;
    font-family: 'Changa', sans-serif;
    margin: -20px 0;
}

 

---

Dzięki za pomoc.

Przy okazji szukałem, szukałem i znalazłem ten artykuł, który tłumaczy mój problem.

https://iamvdo.me/en/blog/css-font-metrics-line-height-and-vertical-align