▼ inline
▼ inline-block
▼block
1.inline
태그는 inline요소 입니다.
block 과 달리 줄 바꿈이 되지 않고, 그 자체 텍스트 성질을 갖고 있습니다. 즉 텍스트 크기만큼만 존재하고 width와 height값을 지정할 수 없습니다. word 같은 문서에서 볼드, 이탤릭, 색상, 밑줄 등 글자나 문장에 효과를 주기 위해 존재하는 단위라고 할 수 있습니다. 문서에서 특정 부분에 색상을 입힌다고 다음에 나오는 글이 줄바꿈 되지 않듯이 inline 요소 뒤에 나오는 태그 또한 줄바꿈 되지 않고 바로 오른쪽에 표시됩니다.
span 태그, b 태그, i 태그, a 태그 등이 이에 해당됩니다.
2.inline-block
block과 inline의 중간 형태라고 볼 수 있는데, 줄 바꿈이 되지 않지만 크기를 지정할 수 있습니다. 즉 inline의 줄바꿈이 되지 않는 텍스트 자체 성질을 가지면서도 block의 크기를 지정할 수 있는 요소를 반반 섞어놓은 것이라고 볼 수 있겠습니다.
3.block
block요소는 기본적으로 가로 영역을 모두 채우며, block 요소 다음에 등장하는 태그는 줄바꿈이 된 것처럼 보입니다.
p 태그, h 태그#, li 태그 를 한번 떠올려 보면
보통 줄바꿈이 되는 경우가 있습니다
또한 width, height 속성을 지정할 수 있다는 특징이 있습니다.