[CSS] display속성에 관해(block, inline, inline-block)

css에 display속성에는 자주 사용하는 것으로 크게 block, inline, inline-block, flex, grid 등이 있고

여기선 block, inline, inline-block에 관해 다뤄보겠다 flex와 grid는 추후 다룰 예정

 

1. block

- 위에서 아래로 배치되는 요소 이며, width와 height값을 지정할 수 있다

대표적인 기본 block속성 태그로는 div, p, h1~6이 해당된다

 

2. inline

- 가로로 배치되는 요소이며 넘치면 줄넘김이 발생한다, block과 달리 width와 height값을 지정할 수 없다

대표적인 기본 inline속성 태그로는 a, span, img가 해당된다

※ img같은 외부 데이터같은 경우는 width, height값으로 크기 지정이 가능하다

 

3. inline-block

- 위 두가지 속성을 합친것으로 inline처럼 가로로 배치되지만 block처럼 크기를 가지며 지정할 수 있다

 

정리

	block	inline	inline-block
기본 크기	좌우로 꽉 참	content에 맞게 참	content에 맞게 참
배치	위에서 아래로	가로(글쓰는 방향)	가로(글쓰는 방향)
width & height	O	X	O
margin & padding	O	△ 가로(inline)만 사용 가능	O