[TIL] display 속성 : inline, inline-block, block

display의 속성 -inline

inline으로 지정된 요소는 줄바꾸무 없이 한 줄에 다른 요소들과 나란히 나타남 (height값, width값 변경 안됨)

ex) default가 inline -> <span>, <a>, <em>...

display의 속성 -block

block으로 지정된 요소는 줄바꿈이 들어가있고 말 그대로 block 형태로 한 줄을 다 차지함 (가로폭을 100% 차지 & margin, width, height 속성 모두 적용)
ex) default가 block -> <h1>, <div>, <p>...

display의 속성 -inline-block

inline과 비슷하지만 width, height 변경이 가능함

display: inline;
display: block;
display: inline-block;

📌 속성을 모르겠다? 색을 넣어보자!