Jestem ciekawy, tag span wydaje się działać tak samo jak div.
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 divs
są to elementy blokowe i spans
elementy 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 spans
do mniejszych podziałów liniowych i divs
wię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 span
elementowi.