inline, inlick-block, block

각각의 display 속성에 대한 개념은 숙지된 채,
코드를 작성할때 직면했던 실수들이 있다.

1. inline 엘리먼트를 박스로 인식하여 width와 height속성을 주려고 했던 점. inline 엘리먼트를 사용할 때 주의할 점은, width와 height 속성을 지정해도 무시된다는 것이다. 왜냐하면 해당 태그가 마크업하고 있는 컨텐트의 크기 만큼만 공간을 차지하도록 되어 있기 때문이다. 또한, margin과 padding 속성은 좌우 간격만 반영이 되고, 상하 간격은 반영이 되지 않는다.

2. 반면 block 엘리먼트는 block 엘리먼트는 inline 엘리먼트와 달리 width, height, margin, padding 속성이 모두 반영된다. 내가 원하는 사이즈의 박스를 만들고 싶을때 div 태그가 편하게 쓰이는 이유가 바로 이것이다.

3. display 속성이 inline-block으로 지정된 엘리먼트는 이 두가지 속성을 합친것 과 같다. 기본적으로 inline 엘리먼트처럼 전후 줄바꿈 없이 한 줄에 다른 엘리먼트들과 나란히 배치되지만, block 엘리먼트처럼 width와 height 속성 지정 및 margin과 padding 속성의 상하 간격 지정이 가능하다. 다시 말해서, 박스 안쪽은 block 엘리먼트의 규칙을 따르면서 박스 바깥쪽은 inline 엘리먼트의 규칙을 따르게 되는 것이다. inline-block 엘리먼트는 명시적으로 해당 엘리먼트의 스타일을 display: inline-block로 지정해줘야 한다.