DIV 그대로 표시 장치가있는 SPAN : 블록

Question

<div/>은 어떤 식 으로든 <span style="display:block" />과 다른가요?

그들은 똑같이 렌더링합니다. 둘 사이의 의미상의 차이점은 무엇입니까?

Answer 1

예들은 다른 (일부 이메일 시스템에서, 예를 들어)를 사용할 수없는 경우 그들은 또한 환경에서 다르게 렌더링됩니다. 당신이 display: block와 스팬 스타일을

에도 불구하고 당신은 여전히 ​​그 안에 블록 레벨 요소를 넣을 수 없습니다 :

<div><p>correct</p></div> 
<span style="display: block;"><p>wrong</p></span> 

(X) HTML은 여전히 ​​HTML DTD를합니다 ((X)를 순종하는 중 하나 CSS가 어떻게 변경 되더라도 상관 없습니다.

<a href='example.com'> 
    <span class='title' style='display:block;'>The title of the image is also a link</span> 
    <img src="example.com/someimage.jpg"/> 
</a> 

당신이 당신의 범위 블록 레벨 요소 만들 수 있습니다 때 함께 강조 이미지와 범위를 허용합니다

Answer 2

예. 그들은 다른 것들을 포함 할 수 있고 다른 장소에서 허용됩니다.

CSS는

Answer 3

는 여기가 (적어도, 유효 코드에 대한) 진정한 차이를 만드는 예제 이상 moused.

div는 a 태그 안에 중첩되지 않습니다.

Answer 4

<div>은 별도의 콘텐츠 블록을 정의하는 것 이상의 고유 한 특수 의미 체계가없는 블록 수준 요소입니다. <span>은 인라인 컨텐츠의 개별 세그먼트를 정의하는 것 이상의 고유 한 특수 의미를 갖지 않는 인라인 요소입니다.

CSS를 사용하여 스팬 디스플레이를 블록으로 만들 수 있지만 편집 할 이유는 없습니다. Gabriel이 보여준 것처럼 순수한 시각 효과는 제외합니다. 제 말은 CSS를 사용하여 스팬을 문서 구조 측면에서 블록 수준의 중요성을 갖도록하려고하지 말아야한다는 것입니다. 또한 사용자가 할 경우 CSS가없는 사용자 (예 : 시각 장애인 또는 검색 엔진)에게 콘텐츠가 무의미하게 표시됩니다.

블록 인 경우 div를 사용하십시오. 인라인 콘텐츠의 일부인 경우 범위를 사용하십시오. CSS는 프레젠테이션에 관한 것입니다. 귀하의 콘텐츠를 사용할 수 있도록 귀하의 마크 업을 논리적 인 방식으로 구성해야합니다.

자세한 내용은 http://www.w3.org/TR/html401/struct/global.html#edef-DIV을 참조하십시오.