inline, inline-block, block

display 속성에서 inline, inline-block, block 3가지를 알아본다.

inline

대표적인 inline 엘리먼트에는 span태그가 있다.

inline으로 지정된 엘리먼트는 전후 줄바꿈 없이 한 줄에 다른 엘리먼트들과 나란히 배치됩니다.

<span>1</span><span>2</span><span>3</span>

결과는??

123

block

대표적인 block 엘리먼트에는 div태그가 있다.

block으로 지정된 엘리먼트는 줄 바꿈이 이루어진다.
block은 width, height, margin, padding 속성이 모두 반영이 됩니다. (inline은 반영x).

<div>1</div><div>2</div><div>3</div>

결과는??

1

2

3

inline(span)과 block(div)를 섞으면 ??

<div>1</div><span>2</span><span>3</span><div>4</div>

결과는??

1

23

4

이렇게 block는 한줄에 block를 1개 이상 쓸 수 없다.

but !!

css로 inline이나 block의 성격을 바꿀 수도 있다.

block의 속성에 display:inline
inline의 속성에 display:block

inline-block

inline-block은 block속성+inline속성을 섞어 놓은 것과 같다.

inline-block속성을 사용하면
inline처럼 줄 바꿈 없이 사용할 수 있는데 block처럼 width,height,margin,top~left를 사용 할수있게된다.
(원래 inline에서는 사용불가)

대표적인 inline-block 엘리먼트로 button이나 select 태그 등을 들 수 있습니다.