[ HTML / CSS ] 인라인 요소 & 블록 요소

 

 

인라인 요소

필요한 부분만 공간 차지.

연속 배치시 기본적으로 가로로 나란히 배치됨.

예) <span>, <img> 등

 

 

블록 요소

가로로 모두 차지.

연속 배치시 기본적으로 아래에 배치됨.

margin, padding, width, height 설정가능. 

예) <p>, <div> 등

 

 

요약

인라인 요소는 자기부분 조금만 <------><--><----->이런 느낌

블록 요소는 가로로 꽉차는 직사각형 느낌이라 보면 된다. 

 

인라인 요소는 기본적으로 크기를 지정할 수 없는데, display: inline-block 을 지정해주면 크기를 설정할 수 있다. 

블록 요소 안에 인라인 요소를 삽입하여 인라인 요소를 관리 할 수 있다.

 

 

참고 

Inline-level content - MDN Web Docs Glossary: Definitions of Web-related terms | MDN

Block-level content - MDN Web Docs Glossary: Definitions of Web-related terms | MDN

 

---

Inline formatting context - CSS: Cascading Style Sheets | MDN

Block formatting context - Developer guides | MDN

 

---

display - CSS: Cascading Style Sheets | MDN