[CSS] inline, block, inline-block

1. inline 인라인

1) 특징

• 한 줄에 여러개를 배치 할 수 있다.
• 기본 너비값은 컨텐츠 너비값이다.
• width 값을 가질 수 없다.
• 상하 마진을 가질 수 없다.
  -> 좌우 마진은 가질 수 있다.
  -> 이는 문자 흐름의 일부로 취급되기 때문이다. 따라서, margin:auto로 가운데 정렬 불가능하고 부모요소에 text-align:center;를 주면 가운데정렬 할 수 있다.

2) 요소

• span, video, a, small, em, big, u, del, s, strong, mark, sub, sup 등

즉, span을 width속성 지정하거나, 마진으로 조정할 수는 없다.

<div><span><span></div>

2. block 블록

1) 특징

• 한줄에 한개를 배치할 수 있다.
• 기본 너비값은 100%
• width값 당연히 가질 수 있다.
• 상하좌우 마진 가질 수 있다.

2) 요소

• div, table, p, figure, caption, nav, footer, section, aside, ul, li, ol, td, th, hr, h1~h6, form 등

즉, width height, margin등 모두 조정할 수 있어서 span같은 태그를 display:block으로 지정하면 조정 가능하다. (단 너비가 넓어져서 width:100% 되는 문제 발생.
근데 상관없고 width,margin 줘야한다면.... 굳이 span을 안쓸거같긴하다. )

3. inline-block 인라인블록

1) 특징

• 한줄에 여러개 배치할 수 있다.
• 기본 너비값은 컨텐츠 너비값
• 크기값 가질 수 있다.
• 상하좌우 마진 가질 수 있다.
  -> 그러나 가운데정렬 하려면 margin:auto는 안되고 부모요소에 text-align:center;를 줘야 한다.

2) 요소

• img, input, button 등

즉, 사실상 span을 width랑 margin주고싶다면 display:inline-block 하는게 맞다.. (block으로 바꿔버리면 span 쓰는 의미가 없음)