HTML(3) 블록 레벨 요소와 인라인 레벨 요소

block

부모 요소의 전체 공간을 차지해서 블록을 만든다.

언제나 새로운 줄에서 시작, 좌우 양측으로 최대한 늘어나 가능한 모든 너비 차지.

이전 이후 요소 사이에서 줄 바꿈 일어남.

페이지의 구조적 요소를 나타낼 때 사용.

width, height 크기를 지정할 수 있고, padding, border, margin 속성을 사용할 수 있음.

ex) div, p, form 등

블록 요소는 인라인 요소 안에 중첩 X, 인라인 요소는 블록 요소 안에 중첩 O

예외) 인라인 a태그의 경우 중첩 가능

<!-- O -->
<div>
	블록요소 안
	<span>인라인요소 중첩 가능</span>
</div>

<!-- X -->
<span>
	인라인요소 안
	<div>블록요소 중첩 불가능</div>
</span>

 

inline

항상 블록 레벨 요소 내에 포함.

컨텐츠에 따라 할당된 공간만 차지.

문장, 단어 같은 작은 부분에 대해서 적용.

새로운 줄을 만들지 않음.

width, height 크기를 지정할 수 없고, padding, border, margin 속성을 사용할 수 있지만, 상하 margin 속성은 사용불가능. (상하 padding도 적용 안됨.)

ex) a, label, input, span, img

 

 

inline-block

인라인 요소처럼 컨텐츠에 따라 할당된 공간만 차지.

블록 요소처럼 width, height 크기 설정 가능.

블록 요소처럼 padding, margin 지정 가능.

인라인 요소처럼 수평으로 쌓임.

display: "inline-block"; 으로 스타일 지정.