CSS inline / block

Block와 Inline

block : 인라인 > 블록은 인라인을 감쌀수 있음

inline : 텍스트 > 인라인은 블록을 감쌀수 없음(유일하게 a태그만 블록을 감쌀수 있음)

 

inline

줄바꿈 없이 다른 요소들과 함께 컨텐츠가 한줄로 나란이 위치

해당 컨텐츠가 차지하고 있는 크기만큼만 공간을 차지 width, height가 무시된다.

maring, padding을 통한 좌우 간격은 적용되지만 상하 간격은 반영되지 않는다.

block

전 후 줄바꿈이 일어나 위 아래의 컨텐츠를 모두 밀어내 혼자 한 줄 안에 위치

margin, padding 등의 간격 뿐만 아니라 width, height 모두 반영 가능

inline-block

inline, block의 단점을 보완하기 위해 사용가능하다.

inline 요소 처럼 줄바꿈이 일어나지 않고 다른 요소들과 함께 위치할수 있다.

block 요소처럼 width, height, margin, padding 반영이 가능하다.

여러 개의 요소를 한줄에 원하는 너비만큼 배치할 수 있기 때문에 레이아웃에 용의하다.