Block vs Inline Elements

HTML에는 두가지 종류의 요소(Element) 가 있습니다. 

Block 요소와 Inline 요소 입니다.

1. Block Elements 

웹페이지 상에 Block 을 만드는 요소입니다. Block 요소는 앞뒤 요소 사이에 새로운 줄을 만들고 나타납니다.

즉 Block 레벨 요소 이전과 이후 요소 사이의 줄을 바꿉니다.

일반적으로 페이지의 구조적 요소를 나타낼 때 사용됩니다.

예를 들어 Block 요소를 사용하여 단락, 목록, 네비게이션 베뉴, 꼬리말 등을 표현할 수 있습니다.

Block 요소는 Inline 요소에 중첩될 수 없지만 다른 Block 요소에 중첩될 수 있습니다.

2. Inline Elements

항상 Block 요소 안에 포함되어 있습니다. 

Inline 요소는 문서의 단락과 같은 큰 범위에는 적용 될 수 없고, 문장, 단어와 같이 작은 부분에 대해서만 적용 될 수 있습니다.

Inline 요소는 새로운 줄을 만들지 않으며, 해당 Inline요소를 작성한 단락안에 나타나게 됩니다.

Inline 요소에는 링크를 정의하는 요소는 <a>, 텍스트를 강조하는 요소인 <em>, <strong> 등이 있습니다.

 

예시입니다.

<em>first</em><em>second</em><em>third</em>

<p>fourth</p><p>fifth</p><p>sixth</p>

<em> 요소는 Inline 요소이므로, 처름 세 개의 요소는 서로 같은 줄에 위치하여 사이에 공백이 없이 출력이 됩니다.

두번째 <p>의 경우 Block  요소 이므로, 각 요소들은 새로운 줄에 나타나며, 각 요소마다 여백(* 여백은 브라우저가 문단에 적용하는 기본 스타일 때문에 적용 됩니다.)이 존재하는 채로 출력이 됩니다. 

firstsecondthird

fourth

fifth

sixth

HTML5 에서 요소 분류를 재정의 하였습니다. 
https://html.spec.whatwg.org/multipage/indices.html#element-content-categories
위와 같은 정의는 이전의 정의보다 더 정확하고 명확하지만, 이해하기에 훨씬 복잡하므로 "Block", "Inline"정의를 통하여 주제에 대한 이야기를 진행합니다.

Block, Inline요소에 대한 내용은 아래 링크에서 확인 가능합니다.
Block Elements, Inline Elements

 

https://developer.mozilla.org/ko/docs/Web/HTML/Inline_elements