[Frontend Interview] inline과 inline-block의 차이점

- block

부모 컨테이너의 너비를 채운다.

새 줄에서 시작하고, 그 옆에 HTML 요소를 허용하지 않는다. (float사용시에는 허용)

width/height 지정이 가능하다.

vertical-align 정렬이 불가능하다.

margin, padding이 모든 방향에서 가능하다.

 

- inline-block

내용에 크기를 의존한다.

다른 콘텐츠와 함께 흐르고, 다른 요소가 옆에 있는 것을 허용한다.

width/height 지정이 가능하다.

vertical-align 정렬이 가능하다.

margin, padding 모든 방향에서 가능하다.

 

- inline

내용에 크기를 의존한다.

다른 콘텐츠와 함께 흐르고, 다른 요소가 옆에 있는 것을 허용한다.

width/height 설정이 무시된다.

vertical-align 정렬이 가능하다.

margin, padding 수평방향만 가능하다. 세로방향은 무시된다.

 

참고: github.com/zereight/front-end-interview-handbook/blob/master/contents/kr/css-questions.md#bfcblock-formatting-context%EC%99%80-%EA%B7%B8-%EC%9E%91%EB%8F%99-%EB%B0%A9%EC%8B%9D%EC%9D%84-%EC%84%A4%EB%AA%85%ED%95%98%EC%84%B8%EC%9A%94