Jaka jest różnica między tagami <span> i <div>?

15

Jestem ciekawy, tag span wydaje się działać tak samo jak div.

robasta
źródło

Odpowiedzi:

22

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.

Nacięcie
źródło
11

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!

mkoistinen
źródło
5

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.

Toby
źródło
Co rozumiesz przez blok i element wbudowany?