인라인 요소 vs 블럭 요소

01.인라인 요소

• span 태그
• 옆(좌->우)으로 계속 쌓이는 구조
• 가로, 세로 사이즈를 가질 수 없음
• 외부 및 내부 여백 추가시 좌우 여백은 추가 되지만 위,아래 여백 추가는 안됨
• 가로,세로 크기 및 위,아래 여백을 지정하고 싶다면 display 요소에 block 또는 inline-block으로 설정
• 인라인 요소안에 블록 요소 사용 불가능

<span><div>Hello<div></span> // 사용 불가능

02.인라인 요소와 인라인 블록의 차이점

• 인라인 요소는 가로,세로 크기 및 위,아래 여백 지정이 불가능 하지만 인라인 블록은 가로,세로 크기 및 위,아래 여백 지정이 가능
• 인라인 블럭도 옆(좌->우)로 계속 쌓이는 구조
  

03.블록 요소

• 전후 줄바꿈 발생하여 다른 요소들을 다른 줄로 밀어 내고 혼자 한 줄 모두 차지함
• 인라인 요소와는 다르게 가로, 세로 크기 그리고 외부 및 내부 여백의 상하좌우 모두 설정 가능
• 블록 요소 안에 블록 요소를 가질 수 있음

<div><div>Hello<div></div> // 사용 가능