[CSS] inline vs inline-block

https://m.blog.naver.com/PostView.naver?isHttpsRedirect=true&blogId=leesd88&logNo=220682157303 

참고한 블로그

깔끔하게 정리되어 있어 한번쯤 보면 좋을 것 같다.

 

자꾸 헷갈리고 검색하게 돼서 한번 다시 정리

inline

- width. height 적용 불가

- 상하 margin, padding(maring-top, margin-bottom, padding-top, padding-bottom) 적용 불가

- line-height 적용 불가

 

inline-block

inline에서 안되던 것들이 적용 된다.

- width. height 적용 가능

- 상하 margin, padding(maring-top, margin-bottom, padding-top, padding-bottom) 적용 가능

- line-height 적용 가능

 

inline-block의 공백 발생 문제 해결:  부모 element에 font-size: 0; 적용.

inline-block끼리 높이가 안맞을 경우? vertical-align으로 맞춰주기

 

 

inline요소에 position absoulte나 float을 주면 자동적으로 display block이 들어간다