inline, block, inline-block

hamingu·2021년 4월 14일
2

inline

display 속성이 inline일 경우 다른 요소와 같은 라인에 그대로 표시되나 inline으로 설정된 요소만 감싸진다. 대표적으로 span 태그가 이에 해당된다.

width, height를 지정할 수 없는 것 또한 특징이다.

block

display 속성이 block인 경우 페이지의 새로운 줄에 위치하며, 가로 크기는 부모 요소에 100%에 해당된다.
width와 height 크기를 지정할 수 있으며, 가로 크기를 부모 요소보다 작게 지정할 수 있다. 다만 이렇게 지정할 경우 나머지 부분은 margin으로 채워져 결국 block된 요소는 부모 요소의 크기와 동일하다.
width,height를 지정할 수 있어 text-align을 사용할 수 있고 대표적인 block 태그로는 div와 p 태그가 있다.

inline-blcok

inline의 속성인 한 줄에 표현하기도 가능하며 blcok의 속성인 width,height 지정이 가능하다.

profile
프로그래밍구

0개의 댓글