[CSS] Inline, Block, Inline-Block 비교

Inline

 

in the same line(같은 줄에 위치할 수 있다) 의 줄임말

 

Height(높이)와 Width(넓이) 가 속성을 지정해도 무시 됨.

 

(해당 태그가 마크업하고 있는 Content의 크기 만큼만 공간을 차지하기 때문)

 

margin의 상하 간격이 적용되지 않는다.(위아래가 적용이 안됨.)

 

---

 

Block

 

Width,Height,Margin,Padding 모두 적용 가능하다.

 

margin : box의 boader(경계)로부터 바깥 쪽에 있는 공간

 

padding : box의 boader(경계)로부터 안 쪽에 있는 공간

 

---

 

Inline-Block

 

Inline처럼 줄 바꿈 없이 한 줄에 엘리먼트 나란히 배치.

 

Inline에서 불가능한 Width,Height 조정 및 Margin,Padding 상하 조정이 가능함.

 

button이나 select 등이 대표적이다.

 

References

---

www.daleseo.com/css-display-inline-block/