display: inline-block 한 줄로 정리

display: inline-block이란?

기본 inline 속성인 태그에 width, height, margin 등을 주고자 block 속성은 부여하지만 배치는 가로로(inline) 하고 싶을 때

예시

ul {
	li {
    	a.icon {
			display: inline-block;
			width: 30px;
			height: 30px;
		}
    }
}

ul 안에 있는 li들은 가로로 배치되어야 한다.

a 태그는 기본 inline 태그이므로 width와 height를 주려면 block 속성이 되어야 하는데, ul의 리스트는 보통 가로로 배열되므로 'block 속성은 가지되 inline처럼 수평 배열이 될 수 있는' display: inline-block 속성을 부여한다.