가시 속성 & inline과 inline-block 차이

inline

• 기본적으로 줄바꿈 강제하지 않음
• 해당 태그가 마크업 하고 있는 컨텐츠의 크기만큼만 공간을 차지
  • width, height 지정해도 무시당함
  • margin, padding 속성 지정 시 좌우 간격만 반영됨 (상하 간격은 반영되지 않음)

block

• 전후 줄바꿈이 발생 -> 다른 요소들을 다음 줄로 밀어내고 혼자 한 줄을 차지
• width, height, margin, padding 설정하는 대로 모두 반영됨

inline-block

• 기본적으로 inline 요소처럼 전후 줄바꿈 없이 다른 요소들과 나란히 배치
• width, height, margin, padding 설정하는 대로 모두 반영됨
• 명시적으로 display:inline-block 지정해줘야 함
• 여러 요소를 한 줄에 원하는 너비만큼 배치 가능 -> 레이아웃에 활용

inline과 inline-block 차이

겉으로 보기엔 별 차이 없어 보이지만, 결정적인 차이

• inline 요소는 width, height 적용 불가능, inline-block은 가능
• inline 요소는 margin, padding 속성 지정 시 좌우 간격만 반영, inline-block은 상하좌우 모두 반영