display: inline, block, inline-block

span 태그의 기본 성질은 inline으로, 동일한 행에 개체가 생성된다.

• inline은 물건을 감싸주는 녀석, 즉 태그 내에 내용(글자,숫자 등)이 있어야 한다. (내용이 없다면 브라우저에 나타나지 않는다.)

<div></div>
<div></div>
<div></div>
<span></span>
<span></span>
<span></span>

div, span{
    width: 50px;
    height: 50px;
    margin: 20px;
}

div{
    background-color: pink;
}

span{
    background-color: skyblue;
}

div 태그의 기본 성질은 block으로, 하나의 개체가 하나의 행(줄)을 차지한다.

• block은 물건을 담는 상자로, 태그 내에 문자가 없어도 형성된다.

display: inline-block

• inline과 block 두 가지 속성을 다가진다. 기본적으로 inline으로 배치되지만, 브라우저의 크기가 줄어들면 block으로 변한다.

div{
    background-color: pink;
    display: inline-block;
} 

• ▽이랬다가
  

• ▽이렇게 브라우저 사이즈에 따라 변할 수 있다.