[HTML/CSS] 인라인 요소, 블록 요소, 인라인 블록 요소

* 정리

 

* 인라인(inline) 요소

html

a 태그는 인라인 요소

 

출력

인라인 요소는 기본적으로 가로 배치.

크기값을 가질 수 없기에 width와 height 적용 안됨.

좌우 마진은 갖지만 상하 마진은 가질 수 없음.

 

* 블록(block) 요소

html

div 태그는 블록 요소

출력

블록 요소는 기본적으로 세로 배치.

width와 height 적용 가능.

상하좌우 모두 마진을 가질 수 있음.

 

* 인라인 블록(inline block) 요소

html

img 태그는 인라인 블록 요소

출력

css 코드의 주석을 보면, 인라인 요소와 블록 요소 성질을 모두 가지고 있는 것을 확인할 수 있다.

 

* 요소 변경: display 속성

값: block, inline-block, inline, none, flex

 

인라인 요소인 a 태그를 인라인블록요소로 변경

 

출력

display: inline-block으로 인라인 요소를 인라인블록요소로 변경.

상하좌우 마진 모두 적용됨.

width 적용됨.