Zagadkowa biała szpara pod div'ami

Question

Mamy następujący kod html :

<div id="div1"><div class="test"/></div><div class="test"/></div></div>

Jak widać wewnątrz nie ma żadnych spacji.

Mamy też kod css

 * {box-sizing: border-box;}
	   
	   #div1
	   {
	     border: 1px solid red;
	   }
	    
	   .test
	   {
	     width:50%; height:40px; 
        display:inline-block; 
         background:green;
	   }
	   
	   .test:nth-of-type(even)
	   {
	     background:black;
	   }

No i teraz zastanawia mnie skąd wzięła się ta biała szpara na dole? Usunąłem spacje wewnątrz diva, próbowałem dać ::after{content:"";} i też nic. Ktoś jest w stanie to wyjaśnić? Aha i co ciekawe szpara znika gdy w kontenerze ustawimy font-size na 0;

https://codepen.io/anon/pen/ZvQPMp?editors=1111

Answer 1

Elementy, którym nadasz "display: inline-block" (w uproszczeniu) podlegają takim modyfikacjom (width, height, ...), jak elementy blokowe, ale podobnie jak elementy liniowe układają się w liniach. Domyślnie między liniami ustawiony jest odstęp. Sprawia on, że poszczególne linie tekstu nie przylegają do siebie, lecz każda znajduje się x px pod poprzednią.

https://developer.mozilla.org/en-US/docs/Web/CSS/line-height

http://www.kurshtml.edu.pl/css/wyswietlanie,pozycjonowanie.html

https://developer.mozilla.org/en-US/docs/Web/CSS/display

 

PS. masz błędy w html.

Ukośnika nie stawiamy przy otwieraniu znacznika:

Źle:

<div class="test"/></div>

Dobrze:

<div class="test"></div>

 

Comments

Domyślnie między liniami ustawiony jest odstęp. 

No, ale przecież tutaj jest tylko jedna linia. 

Answer 2

Ten zagadkowy odstęp wynika z zastosowania display:inline-block. Po prostu tak to już jest z tą właściwością CSS i już. Jeśli układa się elementy za pomocą tej właściwości to trzeba sobie poradzić z tym odstępem pewnymi sposobami.

Comments

a ja mam pytanie ;d dlaczego jest tak ze (dotyczy tego codepena)

 

<div id="div1">
  <div class="test"/></div><div class="test"/></div>
</div>

 

Złączając divy mam je w 1 lini  a jesli zrobie odstep

 

<div id="div1">
  <div class="test"/></div>    <div class="test"/></div>
</div>

 

te divy klasy test jest jeden pod drugim?

---

Bo tam jest spacja i kradnie miejsce

---

nie takiej odpowiedzi oczekuje :P

---

Ale to prawda. Zobacz. Szerokość div'ów jest ustawiona na 50%. Jeżeli teraz po pierwszym divie wciśnie się ta nieszczęsna spacja to nie ma już wystarczająco dużo miejsca na kolejnego diva. Pozostałe miejsce = 50% kontenera minus miejsce zajęte przez spację. Skoro nie ma miejsca aby w jednej linii wszystko upchać, przeglądarka upchnie to pod - w nowej linii.

---

oo, dzieki wielkie :D !

Answer 3

Pierwszy sposób:- line-height rodzica na 0px

       #div1
       {
         border: 1px solid red;
         line-height:0px;
       }

 

Drugi sposób vertical-align elementu, zmieniasz na top, lub bottom

.test
{
	width:50%;
	height:40px;
	display:inline-block;
	background:green;
	vertical-align:top;
}

 

Comments

Kolega nie zrozumiał pytania. Pytanie nie brzmi jak to zlikwidować - na to jak stworzyć taki layout to ja znam co najmniej 2 sposoby to nie problem.

 

Pytanie brzmi skąd ta szpara się wzięła?

---

Ach to nie mam pojęcia:)

Prawdopodobnie , bo takie są jej właściwości.
Jak dodasz tam tekst w środku divów to szpary znikają => i do tego inline-block, zostało chyba stworzone.

Tutaj masz, rozłożone na czynniki pierwsze

https://meyerweb.com/eric/css/inline-format.html

Równie dobrym pytaniem może być, czemu inne metody walczenia z tym działają:
https://css-tricks.com/fighting-the-space-between-inline-block-elements/