- inline 으로 지정된 엘리먼트는 줄바꿈 없이 한줄에 다른 엘리먼트들과 나란히 배치 됩니다.
- 내용물의 크기가 태그의 영역이 됩니다.
- 대표적인 inline 태그 :
<span>
<a>
<img>
👆 <inline>
엘리먼트를 사용 할 때 주의점은, 내용물의 크기가 태그의 영역이 되므로 width와 height 속성을 지정해도 무시 된다.
👆 margin과 padding 속성도 좌우 간격만 반영이 된다.
- block으로 지정된 엘리먼트는 앞 뒤 태그의 내용을 줄바꿈이 들어가 한 줄을 자신이 차지 합니다.
- 대표적인 block 태그 :
<div>
<form>
<header>
👆 block
엘리먼트는 width, height, margin, padding 속성이 모두 반영이 된다.
<inline>
엘리먼트 처럼 한 줄에 나란히 배치가 됩니다.- 하지만 width와 height / margin과 padding 속성 지정이 가능합니다.
- 대표적인 inline-block 태그 :
<button>
<input>
<select>
👆 <inline-block>
엘리먼트는 아래와 같이
span { display: inline-block;}
display: inline-block 속성을 적용 시켜줘야 한다.
👆 <inline-block>
을 활용하면 원하는 크기만큼 여러개의 엘리먼트 들을 배치 시킬 수 있기 때문에 레이아웃에 활용 할 수 있다.