overflow: hidden, display: inline-block시 부모 엘리먼트에 높이가 적용되는 문제
by Alex
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. 참조
Subscribe via RSS