Jak usunąć przerwę między zdjęciami

pytanie zadane 5 grudnia 2015 w HTML i CSS przez Paweł123 Nałogowiec (33,540 p.)

Cześć, mam pytanie.

Jak usunąć przerwę między zdjęciami? Chodzi mi o ten czerwony pasek.

2 odpowiedzi

odpowiedź 5 grudnia 2015 przez Michau Xlow Pasjonat (15,190 p.)

Siemka, podaj może jakiś kod, w ciemno to tak trochę ciężko odgadnąć co jest tego powodem.

komentarz 5 grudnia 2015 przez Paweł123 Nałogowiec (33,540 p.)

<div id="zdjecia_lokalu">
        <div class="zdjecia_zewnatrz"><img src="zdjecia/image001.jpg" height="150"></div>
        <div class="zdjecia_zewnatrz"><img src="zdjecia/image003.jpg" height="150"></div>
    
    
    
    </div>

#zdjecia_lokalu
{
    width: 1200px;
    height: 150px;
    background-color: red;
     
    
    
}
.zdjecia_zewnatrz
{
    display: inline-block;
  
}

Tyle wystarczy, czy podać cały kod?

komentarz 5 grudnia 2015 przez Paweł123 Nałogowiec (33,540 p.)

Jednak już nie trzeba mi pomagać, już sam rozwiązałem problem :)

Wystarczył przerobić troszeczkę kod

.zdjecia_zewnatrz
{
    
    display: block;
    float: left;
   
}

odpowiedź 6 grudnia 2015 przez Strategiusz Dyskutant (9,220 p.)

To niestety wada `display: inline-block;`. Są różne dziwne triki na usuwanie tej spacji. https://css-tricks.com/fighting-the-space-between-inline-block-elements/

Inny sposób to taki jak zastosowałeś, czyli float, ale on też jest nieintuicyjny, bo z niewiadomego powodu czasami trzeba dodawać `clear: both;`.

komentarz 6 grudnia 2015 przez writen Nałogowiec (29,060 p.)

Mówisz, że z niewiadomego powodu? No to poczytaj więcej na temat elementów pływających.

komentarz 6 grudnia 2015 przez Strategiusz Dyskutant (9,220 p.)

Jestem noobem i mam prawo kwestionować wszystko, a do tego moje świeże spojrzenie może być czasem cenne XD

Problem jest właśnie taki, że floata używa się też do elementów, które wcale nie mają pływać, tylko mają być po prostu koło siebie.

komentarz 6 grudnia 2015 przez writen Nałogowiec (29,060 p.)

Na tym własnie polega pływanie elementów. Element z float: left; przykleja się do lewej krawędzi, a kolejne elementy wypełniają pozostałą przestrzeń z jego prawej strony. Nie ma tu żadnej filozofii. Nie chcesz ustawiać clear, to wsadź takie elementy do kontenera z ustawionym overflow: hidden;

Nie ma tu żadnych niewyjaśnionych kwestii, wszystko zachowuje się tak jak powinno. Tylko najpierw trzeba poznać zasadę działania.