display 속성 정리

종류	inline-block, inline, inline-flex	block, flex	none
너비	너비가 설정되어 있지 않다면, 최소한으로 줄어든다.	너비가 설정되어 있지 않다면, 최대한으로 넓어진다.	없어진다.
높이	높이가 설정되어 있지 않다면, 최소한으로 줄어든다.	높이가 설정되어 있지 않다면, 최소한으로 줄어든다.	없어진다.
본질	글자화	블록화	-
line 사용	한 줄에 최대한 여러개가 나온다.	한 줄을 무조건 혼자 쓴다.	-
정렬	부모의 text-align에 의해서 정렬	스스로 margin-left, margin-right를 사용해서 정렬	-

• a, span 엘리먼트는 기본적으로 display가 inline 이다.
• img 엘리먼트는 기본적으로 display가 inline-block 이다.
• inline요소에는 width, height, margin, padding 속성이 제대로 적용되지 않는다.

태그들은 기본적으로 태그만의 속성을 가지고 있다.
특히나 display와 같은 속성들은 그 태그의 글자화와 블록화를 결정하기 때문에
태그들의 속성에 따라서 정렬 방식이 달라질 수 있다.

태그들의 display 기본속성 판단하는 방법

display:block했을 때

• 변화가 없다면 기본속성이고 변화가 있다면 display:inline속성이다.
  block와 같은 태그들처럼 한줄에 하나만 나오거나 한줄을 다쓴다면 이전 속성은 inline 이다

display:inline을 했을 때

• 변화가 없다면 기본속성이고 변화가 있다면 한줄을 쓰면
  inline와 같은 태그들과 한줄에 나란이 붙여서 나온다면 이전 속성은 block 이다