웹사이트 만들기/CSS
Inline과 Block 그리고 Inline-block의 차이점
열대어05
2019. 12. 11. 16:47
Display: block
- 블럭은 자신이 속한 영역 전체를 차지합니다. 즉, 블럭은 기본적으로 width 값이 100%입니다.
- 블럭은 라인이 새롭게 추가 됩니다.
- 블럭은 height값과 width 값, margin값 그리고 padding 값을 지정할 수 있습니다.
Display: Inline
- 인라인은 주로 텍스트를 기입할 때 사용합니다. 즉, 자신의 컨텐츠 영역이 자신의 width 값입니다.
- 인라인은 라인이 새롭게 추가되지 않습니다.
- 인라인은 width값과 height 값을 지정할 수 없습니다.
- 인라인은 margin과 padding이 위와 아래에는 지정되지 않습니다.
Display: Inline-block
- 인라인 블럭은 줄바꿈이 되지 않습니다.
- 인라인 블럭은 width값과 height 값을 지정 할 수 있습니다.
- 인라인 블럭에 widht 값과 height 값을 지정하지 않으면 inline과 같이 컨텐츠 만큼 영역이 잡힙니다.