Odpowiedzi:
Główną różnicą jest to, że <span>znacznik jest elementem wbudowanym , podczas gdy <div>znacznik jest elementem na poziomie bloku .
Dwa elementy poziomu bloku (div) będą wyświetlane jeden po drugim w pionie, natomiast dwa elementy wbudowane (przęsła) będą wyświetlane jeden po drugim w poziomie.
Aby zrozumieć różnicę pod względem wizualnym, pomocne może być postrzeganie <span>elementu jako słowa, a <div>elementu jako akapitu: divs są zwykle używane do układania bloków treści. Rozpiętości są zwykle używane do podświetlania grup słów w tej treści.
Zarówno Nick, jak i Toby dobrze odpowiedzieli na twoje pytanie, ale aby przejść dalej o jeden poziom.
Domyślnie <div>s są elementami blokowymi, a <span>s elementami wbudowanymi. Są to ogólne tagi, które w prosty sposób zapewniają kontenery blokowe lub wbudowane. W praktyce można je przekręcać za pomocą CSS, aby były nieco wymienne, ustawiając atrybut display css na „block”, „inline” lub nawet „inline-block” (między innymi).
Jednak nie zaleca się zginania ich, aby zachowywały się tak, jakby zachowywały się nawzajem. Istnieją też reguły w HTML, które faktycznie uniemożliwiają stosowanie elementów na poziomie bloków w innych elementach (głównie elementach wbudowanych, takich jak <a>znacznik), dlatego powinieneś spróbować użyć odpowiedniego znacznika tam, gdzie jest to właściwe i próbować zastąpić ich zachowanie, gdy niezbędne.
Spróbuj myśleć o nich jako o elementach semantycznych. Użyj, <span>gdy chcesz otagować zawartość używaną w blokach tekstu, i użyj <div>, gdy chcesz dodać dodatkową strukturę do samej strony.
Powiedziawszy to, HTML5 ma mnóstwo elementów semantycznych, które powinny znacznie zmniejszyć potrzebę korzystania z jednego z tych ogólnych tagów. Zaleca się stosowanie znaczników semantycznych zamiast dodawania dużej ilości div i span.
Powodzenia!
Główna różnica polega na tym, że divssą to elementy blokowe i spanselementy wbudowane.
Oba mogą być stylizowane za pomocą CSS, aby działać w dowolny sposób, ale po wyjęciu z pudełka zwykle używasz go spansdo mniejszych podziałów liniowych i divswiększych bloków.
Niektóre rzeczy będą wpływać na elementy wbudowane i blokować inaczej, na przykład nie można nadać wysokości spanelementowi.