[html] Inline 엘리먼트와 Block 엘리먼트의 차이

html tag는 브라우저에 탭재된 Stylesheet 에 따라 기본적인 CSS 속성을 가지고 있다.

그 중에 inline 과 block 이라는 속성은 tag에 원천적인 속성으로 포함하고 있기 때문에 꼭 이해해야 한다.

 inline 속성 

줄을 바꾸지 않고 다른 요소와 함께 수평으로 한 행에 정렬하려는 속성 이다.

width, height 속성이 적용되지 않고, vertical-align, line-height 속성이 적용 된다.

연속으로 나열되는 tag 간에 최소한의 간격을 유지하기 위해서 왼쪽, 오른쪽에 약 5px 가량의 margin 이 자동으로 발생 한다.

inline 속성의 엘리먼트

samp, kbd, var, cite, abbr, acronym, a, img, object, br, script, map, q, sub, sup, span, bdo, input, select, textarea, label, button

 block 속성 

줄바꿈 되지 않고 그 자체로 한줄을 완전히 차지한다. 기본적으로 width 값이 100% 로 설정 된다.

vertical-align 속성이 적용되지 않고, width, height, margin, padding, line-height 속성이 적용 된다.

모양새를 쉽게 제어할 수 있는 속성 때문에 대부분 화면 구성이나 레이아웃에 사용 한다.

block 속성의 엘리먼트

p, h1~h6, ul, ol, dl, table, div, noscript, blockquote, form, hr, table, fieldset, adress