[CSS] inline 박스 사용 시 height, padding 미적용 문제

inline 박스를 쓰다보면 block 박스와 다르게 몇 가지 css 속성이 적용되지 않을 때가 있다.

여기에는 inline 박스의 규칙 때문이다.

 

1. inline 박스는 width나 height 속성을 지정할 수 없다.

inline 박스는 너비와 높이가 내부 요소에 따라 자동으로 결정된다. 따라서 임의로 이 값을 변경할 수 없다.

 

2. inline 박스는 padding, border, margin을 적용할 수 있다. 하지만, 상하 레이아웃에 계산되지 않는다.

 

inline 박스에 이 값들을 작성하면 적용은 된다. 그런데 박스 간에는 이 값들만큼 좌우 거리가 멀어지지만, 상하 거리는 멀어지지 않는다.

• 그래서, padding으로 높이를 줘도 대상의 위 아래에 있는 박스는 이를 계산하지 않고 겹쳐버린다. 
• 부모도 자식인 inline 박스에 추가된 상하padding을 계산하지 않는다. 그래서 자식이 overflow 된다.

 

---

📘 해결 방법

1. display 설정

display를 block이나 inline-block으로 바꾸면 width, height를 적용할 수 았고, padding, margin, border도 정상적으로 적용된다.

 

2. line-height

line-height를 이용하면 텍스트의 줄 간격을 설정할 수 있다. 이를 이용해서 inline 박스의 높이를 조절할 수 있다. 단, 이 속성은 박스의 높이 설정을 위해 있는 속성이 아닐 뿐더러 상속 과정에서 하위 요소에 크게 영향을 끼치니 가능하면 목적에 맞게 1번 해결방법을 쓰는 게 좋다.