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

블록(block)요소: 화면의 한 줄을 전부 차지한다.

인라인(inline)요소: 한 줄에 차례대로 배치된다. 현재 줄에서 필요한 만큼의 너비만을 차지한다.

 

✅  블록요소

블록요소는 브라우저의 한 줄을 모두 차지한다.

예를 들면, <h1> , <p> , <ul> , <li> , <table> , <blockquote> <pre> , <div> , <form> , <header> , <nav> 요소가 블록 요소이다.

즉 한 줄에 하나씩 배치된다.

블록요소 예시

 

✅  인라인요소

인라인요소는 정상적으로는 한 줄 안에 차례대로 배치된다.

예를 들면, <a>, <img>, <span>, <strong>, <em>, <br>, <input> 요소가 인라인 요소이다.

 

인라인요소 예시