HTML 태그 요소에는 inline, inline-block 그리고 block이 있다.
HTML 최신 버전인 HTML5 이전에는 inline(인라인) 요소와 block(블록) 요소 이렇게 두 가지로 구분 되어왔다.
inline
인라인 요소는 딱 콘텐츠만큼의 공간만 차지하는 요소이다. 인라인요소는 width와 height가 적용되지않는다. 블럭요소와 달리 줄바꿈도 일어나지 않으며 요소가 다른 요소 옆에 나란히 배치될 수 있다. margin과 padding 속성은 좌우 간격만 반영이 되고 상하로는 반영되지 않는다.
아래 몇 가지 태그들은 모두 인라인요소이다!
<br>
<button>
<canvas>
<cite>
<code>
<data>
<datalist>
<i>
<img>
<input>
<label>
<output>
<picture>
<progress>
<span>
<strong>
<svg>
<u>
<var>
inline-block
인라인블럭요소는 기본적으로 인라인요소처럼 줄바꿈 없이 한 줄에 다른 엘리먼트들과 나란히 배치된다. 그러나 인라인요소와 달리 너비와 높이를 설정할 수 있고 padding과 margin이 상,하에도 적용된다.
인라인블럭 요소로 <button>이나 <select> 태그 등을 들 수 있다.
block
블록 요소는 기본적으로 혼자 한 줄 전체를 다 차지하는 직사각형 형태가 되며, 다른 요소를 밀어내어 줄바꿈한다. width, height, margin, padding 값이 적용가능하다. display:inline이라는 CSS명령어로 블록 요소를 인라인 요소의 속성으로 변경 할 수 있다!
블럭요소 태그의 종류에는<div>, <p>, <h1> 태그 등이 있다.
;(