[CSS] inline, block, inline-block 차이점

block요소

안에 내용이 아무리 작더라도 온전히 상자 형태로 자리를 차지하는 요소. (padding, margin 값 포함)

때문에 넓이, 높이를 설정할 수 있다. 물론 넓이를 설정해도 별도의 설정없이는 자신 옆에 아무도 오게 할 수 없다.

글자와 다른 상자로 취급되기에 text-align으로 정렬을 할 수가 없다.

 

margin:0 auto를 통해 상하의 여백은 0, 양 옆의 여백은 자동으로 조절하여 가운데 정렬 효과를 볼 수 있다.

float:left 혹은 float:right 로 왼쪽/오른쪽 정렬 효과를 볼 수 있다.

 

float

float는 block요소를 왼쪽, 오른쪽에 붙이겠다는 속성.

때문에 float를 한 번만 써도 아래의 block요소들이 영향을 받기 때문에

float를 넣은 요소 부모 요소의 뒤쪽(부모요소::after)이나 그 다음 요소에 'clear' 속성을 통해 float적용을 멈춰줘야 한다.

 

 

inline요소

안에 들어간 내용만큼의 자리만 차지하는 요소. (padding, margin 값 포함)

때문에 넓이, 높이를 설정해도 반영이 되지 않는다.

글자와 같이 취급되기에 text-align을 통해 정렬할 수 있다.

 

inline-block 요소

block요소처럼 width와 height를 설정하여 박스 형태로 자리차지를 하지만,

inline 요소처럼 옆에 다른 요소가 오도록 만들 수 있다.

즉, 자신이 차지한 자리만 가지고 옆의 자리를 다른 요소에게 양보할 수 있다.