Block Element 와 Inline Element 의 차이점

웹 페이지의 영역을 구분할 때 사용하는 태그

<div> : 주로 영역을 분할하거나, 어떠한 태그를 닫는 컨테이너로써의 역할을 한다.

• 영역태그, 컨테이너 - display : block (default값)

<span> : 특정 텍스트나 문장영역을 지정하여 분할할때 사용.

• 영역태그, 특정아이템 - display : inline (default값)
• 문장의 컨텐츠만큼만 차지한다.

🧷 코드 예시

<div>hello world</div>
<span>hello world</span>

🧷 출력 결과

📍 Block Element

: 부모 요소의 전체공간을 차지하여 "블록"을 만든다.

• 화면 구성이나 레이아웃을 짤 때는 블록 레벨 요소를 사용.
• 블록 레벨 요소는 한칸을 모두 차지하기 때문에 세로로 나열된다.
• width, height, margin 속성이 적용됨.

📍 Inline Element

: 콘텐츠의 흐름을 끊지않고(줄바꿈x), 요소를 구성하는 태그에 할당된 공간만 차지한다.

• 인라인 레벨 요소는 콘텐츠 영역 만큼 차지하기 때문에 가로로 나열된다.
• margin-top, margin-bottom 적용되지 않음. BUT, line-height 이용.
• width,height 속성이 적용되지 않는다.
• 태그가 콘텐츠의 할당된 공간만 갖고 있기 때문에, text-align 과 같은 속성은 사용할 수 없다.

📂 Block, Inline element 목록