CSS Block/Inline
Block 과 Inline
block
은 한 영역을 차지하는 박스형태를 가지는 성질이다. 그렇기 때문에 block는 기본적으로 width값이 100%가 되며 라인이 새로 추가된다.inline
은 주로 텍스트를 주입 할 때 사용되는 형태이다. 그렇기 때문에 block처럼 width값이 100%가 아닌 컨텐츠 영역만큼 자동으로 잡히게 되며 라인이 새로 추가 되지 않는다.정리
- block은 height와 width값을 지정 할 수 있다.
- block은 margin와 padding을 지정 할 수 있다.
- inline은 widdth와 height를 명시 할 수 없다.
- inline에서 margin은 위아래엔 적용 되지 않는다.
- inline에서 padding은 좌우는 공간과 시각적인 부분이 모두 적용 되지만 위아래는 시각적으로는 추가되지만 공간을 차지 하지 않는다.
Block 과 Inline 속성 태그 표기시 주의할 점
Block은 Inline을 포괄하는 더 큰 개념이다. 따라서 HTML을 마크업 할 때는 Inline 속성의 태그 안에 Block 속성 태그를 넣으면 문법 오류가 된다. inline이 block보다 작은 개념임
inline-block
inline-block은 inline처럼 한줄에 배치되지만 inline에서 불가능하던 width와 height속성지정 및 margin과 padding속성의 상하 간격 지정이 가능해진다.