CSS - inline, inline-block, block

display

display 속성은 'HTML 태그들을 어떻게 배치할 것인가?'를 말하는 것이다.
가장 많이 사용되는 display의 속성 값에 대해서 알아보고자 한다.

display : inline / inline-block / block

inline

inline은 가로 배치라고 생각하면 쉽다. 대표적으로 span, a, img 태그들이 가로로 배치된다. 같은 선상에서 가로로 배치되는 것이 inline이다.

✔️ inline요소의 특징
1) block처럼 박스의 형태가 아니기 때문에 width와 height가 지정 되어도 무시 된다.
2) margin과 padding의 값은 좌우 간격만 반영된다.

block

block은 세로로 배치된다고 생각하자.
inline은 순차적으로 하나씩 가로로 나열되지만, block은 다음 줄로 넘어가서 배치가 된다.(다음 줄로 넘어가기 때문에 세로로 나열된다고 생각하자)
대표적으로 p, div 태그가 있다.

✔️ block요소의 특징
1) width는 옆으로 늘어날 수 있는 만큼 최대(부모 요소가 있다면 부모 요소의 width만큼)
2) height는 내용물의 높이만큼(내용물이 글자라면 글자의 크기만큼)

inline-block

보여지는 그대로 inline과 block의 특징을 모두 갖는다. inline처럼 가로로 쭉 나열 되기도, block처럼 width와 height 값을 갖는다.
기본적으로는 가로로 쭉 배치가 되지만, inline이 갖지 못 했던 width와 height의 값을 가질 수 있다.
대표적으로 button, input 태그가 있다.