CSS Block/Inline
Block구조 와 Inline구조
블록 구조(block)
블록 요소는 일단 기본적으로 줄 바꿈이 일어나는 형태로 영역의 너비가 상위 영역의 전체 너비만큼 만들어지는 형태입니다.
블록 요소에는 일부를 제외한 블록 요소를 포함하고, 인라인 요소까지 포함 가능합니다.
block 요소
div, p, h1~h6, ul, li, ol, table, form, section, footer, address, article, aside, blockgquote, canvas, dd, dl, hr, header, pre, video등
- block은 height와 width값을 지정 할 수 있다.
- block은 margin과 padding을 지정 할 수 있다.
인라인 구조(inline)
인라인 구조는 주로 텍스트를 주입 할 때 사용 되는 형태입니다.
기본적으로 컨텐츠 영역만큼 자동으로 잡히게 되며 라인이 새로 추가 되지 않습니다.
높이 값은 폰트의 크기만큼 잡힙니다.(line-height로 설정이 가능)
인라인 구조는 블록구조를 감쌀수 없습니다.
그러나 예외적으로 <a>태그는 유일하게 블록구조를 감쌀수 있습니다.
inline 요소
a, i, span, abbr, img, strong, b, input, sub, br, code, em, samll, tt, map, textarea, label, sup, q. button, cite등
- width와 height를 명시 할 수 없다.
- margin은 위아래엔 적용 되지 않는다.
- padding은 좌우는 공간과 시각적인 부분이 모두 적용 되지만 위아래는 시각적으로는 추가되지만 공간을 차지 하지는 않는다.
inline-block
inline-block 은 말그대로 inline의 특징과 block의 특징을 모두 가진 요소입니다.
inline-block의 특징- 줄바꿈이 이루어지지 않는다.
- block처럼 width와 height를 지정 할 수 있다.
- 만약 width와 height를 지정하지 않을 경우, inline과 같이 컨텐츠만큼만 영역이 잡힌다.