Mam kilka wyświetlanych DIV jako bloków śródliniowych; i wydaje się, że odstępy między aplikacjami są automatycznie pobierane z przeglądarki. Mają margines/dopełnienie ustawione na 0. Czy istnieje sposób na poprawienie tego bez stosowania ujemnych marginesów?Inline-Block bez marginesów?
Sam, ta przestrzeń, którą widzisz, to w rzeczywistości spacja. Dlatego usunięcie paddings i marginesów nic nie robi. Pozwól mi wyjaśnić. Kiedy masz to:
HTML
<div>
a
a
a
a
</div>
to jak to renderowane:
a a a a
... prawda?
Tak więc, jeśli masz to:
<div>
<div style="display:inline-block"></div>
<div style="display:inline-block"></div>
<div style="display:inline-block"></div>
</div>
... dostaniesz to samo:
block [space] block [space] block
... Teraz istnieje wiele różnych rozwiązań tego problemu. Wierzę, najczęstszym jest zakomentowałeś spacje w HTML:
<div>
<div style="display:inline-block"></div><!--
--><div style="display:inline-block"></div><!--
--><div style="display:inline-block"></div>
</div>
nie lubię go chociaż - Wolę utrzymywanie html tak czysty, jak to możliwe. Moim preferowanym sposobem jest ustawienie rozmiaru czcionki rodzica na 0, a następnie przywrócenie żądanego rozmiaru czcionki na blokach wbudowanych.Tak:
div {
font-size: 0; /* removes the whitespace */
}
div div {
display: inline-block;
font-size: 14px;
}
Nie trzeba używać ujemnych marginesów, aby zrównoważyć pierwotne marginesy.
Zamiast można zastąpić je z następujących czynności:
* { margin:0; }
czyli
.div { margin:0; }
jeśli jest elementem specyficzny.
EDIT:
Wydaje się, że problem może być wynikiem niezamierzonego spacji. Na przykład:
<div style="display:inline-block">
...
</div>
<div style="display:inline-block">
...
</div>
Pomiędzy dwoma przekładkami istnieje biały odstęp, a przeglądarka wydrukuje białą przestrzeń jako wynik. Aby rozwiązać ten problem, musisz go zmienić na:
<div style="display:inline-block">
...
</div><div style="display:inline-block">
...
</div>
Ciesz się i powodzenia!
co robi? – Sam
* jest znakiem wieloznacznym w CSS, który reprezentuje wszystkie elementy w danym dokumencie. –
To nie rozwiązuje problemu z moim marginesem. Być może "marże" są złym terminem. Mam kilka div obok siebie, a przeglądarka domyślnie odstępuje między nimi; mimo że są ustawione na 0 i wypełnienie 0. – Sam
inline-block jest pierwotnie IE6 włamać
To właśnie jego zastosowania:
Więc jeśli chcesz mieć wiele DIV obok siebie nawzajem należy użyć pacy, jego zamiar rozwiązać wiele twoje problemy CSS inline-block może spowodować, zwłaszcza krzyż przeglądarka wysyła
Więcej o inline-block here arcticle 9.2.4
pozdrawiam SP
proszę komentować, jeśli nie zgadzają się
Blok inline nie jest hackerem, pozwala elementom przepływać tak, jakby były częścią tekstu. Twoja rada dotycząca używania pływaka jest zła. Niepotrzebne korzystanie z funkcji float powoduje problemy z obsługą, co prawdopodobnie oznacza, że Twoja witryna nie reaguje na różne rozmiary ekranu/okien i jest kiepska. – Jake
Inline-block ma pewne problemy, więc jego luźne luźne i zgadzam się, że float nie jest idealnym rozwiązaniem, ale nie masz wbudowanego bloku w IE6, więc to dlatego wybrałbym float jako awarię. –
Innym sposobem znalazłem metodę zmiany word-spacing na kontenerze nadrzędnym pracuje dla mnie https://jsfiddle.net/1ex5gpo3/2/
.parent {
word-spacing: -1em;
}
.child {
word-spacing: normal;
display: inline-block;
}
Można używać zarówno display: inline-block i float: left usunąć tę przestrzeń.
Tutaj idzie plunkr: https://plnkr.co/edit/Sn3NG77asiXO8UrrpxWD?p=preview
+1 - oba są dobrymi rozwiązaniami. – Wex