inline, inline-block, block...그게 뭐죠? 😮 난 인라인 스케이트랑 블록 쌓기 밖에 모르는겠는데.ㅎ
......라는 마음을 버리기 위해 복습 겸 정리를 해봤습니다. 레고 🏁

inline

display 속성에서 inline 으로 지정된 요소는 앞 뒤 줄바꿈이 없이 한줄에 다른 요소들과 나란히(여러개)배치됩니다. 가장 대표적인 태그로는 span 태그가 있습니다.

• width, height 적용 ❌

• margin, padding + top, bottom 적용 ❌
  👉 form element img 은 제외

• line-height 적용 ❌
  ex) span태그에 line-height 값 설정 불가능! span 부모인 div에만 영향을 받습니다.

대표적인 inline tag

a , img , label , script , select , span , strong , textarea , form

inline-block

inline-block 태그는 inline과 가장 유사합니다. inline 처럼 한 줄에 표현하면서도 inline 의 단점을 보완한 태그가 바로 inline-block 입니다!

• width, height 적용 ⭕️

• margin, padding + top, bottom 적용 ⭕️

• line-height 적용 ⭕️

대표적인 inline-block tag

button , input , select

block

block 태그는 아래로 블록처럼 떨어지는 요소 입니다. 부모 요소의 전체 공간을 차지하여 "블록"을 만듭니다. 때문에 컨텐츠의 크기와는 별개로 기본 너비값은 부모 요소의 공간을 100% 차지한 넓이이며 높이는 컨텐츠의 크기에 따라 달라지게 됩니다.

• width, height, margin, padding 속성 전체 적용 ⭕️

대표적인 block tag

article , aside , blockquote , address , div , footer,
form , h1 ~ h6 , header , p , section , table , ul