블록요소 vs 인라인요소

인라인 - inline

  span, a, video, audio 등

• 기본 너비 값: 컨텐츠의 너비 값
• 한 줄에 여러 개 배치
• 크기 값을 가질 수 없음
• 상하 마진을 가질 수 없음

 

블록 요소 - block

  div, h1~h6, table, header, nav, footer, section, article, p, ul, ol, li, hr 등

• 기본 너비 값: 100%
• 한 줄에 하나만 배치
• 너비 값, 높이 값 가질 수 있음
• 상하좌우 마진을 가질 수 있음

 

인라인 블록 - inline-block

  img, input, button, FontAwesome

• 기본 너비 값: 컨텐츠의 너비 값
• 한 줄에 여러 개 배치
• 크기 값을 가질 수 있음
• 상하좌우 마진을 가질 수 있음

 

참조) html 구조가 더 간단할수록 더 좋다