1. 문제

자식 엘리먼트에 overflow: hidden, display: inline-block시 부모 엘리먼트에 높이가 적용되는 문제가 발생하였다.

<body>
  <div class="parent">
    <div class="child">A</div>
  </div>
</body>

.parent{
    background-color:red;
}

.child{
    background-color:green;
    display:inline-block;
    overflow:hidden;
}

https://jsbin.com/sotuqet/edit?html,css

2. 해결

처음에는 부모 엘리먼트에 position: absolute를 적용하고 top: 5px정도 내리는 방법을 사용하였다. 하지만 다른 자식 엘리먼트에 스타일이 이상하게 적용되는 문제가 발생되어 다른 방법을 찾게 되었다.

Stackoverflow를 검색해본 결과 vertical-align: top을 적용하면 해결된다는 답변이 나왔다.

vertical-align은 inline 엘리먼트와 inline-block 엘리먼트를 수직 정렬할때 사용하며, 다른 inline 엘리먼트에 상대적으로 정렬된다. 그렇기 때문에 같은 줄에 존재하는 inline 엘리먼트의 크기에 따라 높낮이가 변경될 수 있으며, line-height설정에 따라 달라질 수도 있다.

또한 inline-block에 적용된 overflow: hidden은 하단 꼭지가 text의 baseline에 정렬되도록 하기때문에 수직정렬을 통해 이 문제를 해결할수 있는 것이다.

3. 참조