Jakie są różnice między blokiem śródliniowym a komórką tabeli?css inline-block vs table-cell
Znalazłem te dwa style są takie same. Cokolwiek zaprojektujesz np. text-align: center; vertical-align: middle; itp. Poprzez identyfikację display: inline-block; lub display: table-cell; będzie działać tak samo.
Proszę podać kluczowe różnice.
display:table-cell jest przeznaczony do użytku wewnątrz display:table-row, sam wewnątrz display:table. Niewłaściwe użycie spowoduje utworzenie anonimowych elementów, które mogą negatywnie wpływać na inne aspekty twojego układu.
Zgodnie z powyższym, vertical-align ma bardzo różne znaczenie w obu. W dokumencie display:inline-block chodzi o to, jak sam element jest dopasowywany do otaczających elementów. Z drugiej strony, z display:table-cell, wpłynie to na pionowe wyrównanie elementów wewnątrz niego.
display: table-cell i display: inline-block; są mylące to samo, ale ma ogromną różnicę między nimi. display: inline-block; nie będzie zachowywał się tak jak display: table-cell;, tzn. Blok inline będzie zachowywał się jak poziom bloku, gdy przeglądarka będzie miała większy rozmiar lub jeśli twoja zawartość przekroczy jej szerokość, podczas gdy display: table-cell; nie będzie.
Widać różnice między nimi here
Znajdziesz tu także różnic pomiędzy blokiem przy zastosowaniu display: inline-block; Re-size okno naciskając klawisz Ctrl i przewijanie za pomocą przycisku przewijania myszy, aby zobaczyć różnice.
Uwaga: vertical-align: middle; nie działa jako display: table-cell; w display: inline-block;. Jeśli masz działające demo, udostępnij je.
Ustawiona wysokość linii równa wysokości elementu i wyrównanie w pionie będzie działać dla bloku inline. –
Nic dziwnego, że wszyscy nienawidzą css ... wszędzie są połowy –