[CSS] div 태그와 span 태그 비교

span

• 대표적인 인라인 요소
• 본질적으로 아무것도 나타내지 않는 콘텐츠 영역을 설정하는 용도
• 요소가 수평으로 쌓임
• width, height로 가로, 세로 너비를 지정할 수 없다
• margin, padding으로 왼쪽, 오른쪽 공백을 만들 수 있지만 위, 아래 공백을 만들 수 없다
• 인라인 요소이므로 안에 블록 요소를 자식 태그로 가질 수 없다 (인라인 요소는 인라인 요소만 자식 태그로 가질 수 있다)
• span 태그를 작성할때 한줄을 띄우면 공백이 나타난다

span 태그 사이에 공백이 나타나지 않음

<span>Apple</span><span>Banana</span>

span 태그 사이에 공백이 나타남

<span>Apple</span>
<span>Banana</span>

 

div

• 대표적인 블록 요소로 division의 약어
• 특별한 의미가 없는 구분을 위한 요소 (레이아웃의 영역을 잡을 때 사용)
• 요소가 수직으로 쌓임
• width, height로 가로, 세로 너비를 지정할 수 있다
• margin, padding으로 사방에 공백을 만들 수 있다
• 내부에 인라인 요소, 블록 요소를 자식 태그로 가질 수 있다

 

정리

	span	div
display	인라인	블록
생성 방향	요소가 수평으로 쌓임	요소가 수직으로 쌓임
너비 설정	가로, 세로 너비 지정 불가	가로, 세로 너비 지정 가능
여백 설정	위 아래 여백 생성 불가 (padding, margin)	여백 생성 가능 (padding, margin)
자식 요소	자식요소로 블록요소를 가질 수 없음	자식요소로 모든요소를 가질 수 있음