inline, block, inline-block 이란 뭘까 ?

1. inline

span, a, em 등등..

한 줄 내에 여러 요소가 표시될 수 있다 ~!

인라인은 본인 컨텐츠만큼의 공간만 차지한다.

따라서 높이나 길이를 직접 설정해도 무시한다

margin/padding을 설정해도 좌우간격만 적용되고, 상하 간격은 적용되지 않는다 !

line-height로 글자의 줄 간격을 설정할 수 있지만, 전체의 높이는 설정할 수 없다 줄이 늘어나면 높이도 늘어나기 때문이다 !

 

2. block

div h1 p 등등...

하나의 요소가 한 줄 전체를 차지하는 것이다 !

전혀 문제 없이 높이나 길이 마진 패딩을 적용할 수 있다~!

3. inline-block

display: inline-block ; 으로 설정해야하고, inline과 block의 특징을 모두 가진 요소이다

내가 느끼기엔 inline의 단점을 완화한 것 같이 느껴진다 ~!

하나의 요소는 한 줄 전체를 차지하지 않으며,

block 처럼 높낮이나 margin,padding을 설정하는 것도 가능하다 ~

지정하지 않을 경우에는, inline과 동일하게 컨텐츠만큼의 영역이 잡힌다 !

위의 사진에서 inline과 inline-block 요소에 둘 다 margin-top :50px;를 설정했지만 inline-block 만 적용된 모습이다 ~!