inline vs inline-block

strong태그에도 width와 height를 100px주고 div태그에도 width와 height를 100px 주었는데 실제로 strong태그에 style들이 어떻게 적용되었는지 살펴보면 width와 height가 적용이 안된것을 확인할 수 있다.

strong width height 200px

div에 width와 height는 200px이 적용되었다(2px씩 늘어난건 border를 주었기 때문).

div width 200px height 200px

 

 

 

또, 여기서 살펴봐야될건 strong padding 100px과 block padding 100px인데 둘은 똑같이 padding이 100px 주어졌지만 공간을 차지하는 모습이 전혀 다르다.

 

strong 태그는 보여질 때 inline 즉, 다른 요소들과 한줄에 위치해서 보여지고 div 요소는 한줄을 차지하는 block 속성을 가진다.

strong 태그에 padding을 100px을 주게되면 시각적으로는 아래에도 padding이 적용된 것처럼 보이지만 그 밑에 block 요소가 올 때 공간을 차지하지 못하고 겹치게 된다.

strong - margin 100px

div margin 100px

margin을 준 strong요소와 div요소를 살펴보면 strong은 margin이 양 옆에만 적용이되고 위,아래에는 적용되지 않았고 div 요소는 위, 아래, 좌, 우에 모두 margin이 설정된 것을 볼 수 있다.

 

strong처럼 inline 요소들은 width나 height에 영향을 받지 않으며, padding이나 margin을 적용할 때 좌우에만 적용이 된다는 것(공간을 차지하는것)을 알 수 있다.

 

 

그러면 inline 요소들에 width, height도 주고 padding이나 margin값을 줄 때 위,아래도 주고 싶다면 어떻게 해야될까?

그때는 inline요소들을 그대로 사용하되 display 속성값으로 inline-block을 주면 된다.

strong태그에 width/height를 적용했더니 속성이 적용이 되었고 padding을 주었더니 좌우 뿐만이 아닌 위,아래에도 적용되는것을 확인할 수 있다.

 

요소들을 배치할 때 이러한 차이점을 정확하게 알고 접근할 수 있도록 하면 좋을것 같다.