[HTML/CSS] block에서 inline으로 속성바꾸기

block과 inline은 각자 같은 줄에 다른 컨텐츠를 놓을 수 있냐 없냐에 따라 달라진다.

block은 놓을 수 없고, inline은 놓을 수 있는데 만약 block 속성을 가진 태그를 inline으로 바꾸고 싶다면 display 속성을 사용하면 된다.

<style>
	span {
    display: block;
    }
</style>

위와 같이 대표적인 inline 태그인 span의 경우도, display 속성을 block으로 하면 block으로 바뀌게 된다. 반대로 div 태그도  display 속성을 inline으로 하면 inline으로 바뀌게 된다. 

 

block과 달리 inline은 그 자체로는 높이와 너비를 가질 수 없다. 그래서 내용물을 적지 않으면 block과 달리 아무것도 나타나지 않는다. inline은 block과 달리 box가 아니기 때문이다.

 

대표적인 inline은 span, a, img가 있다.