box-sizing 속성 질문

Question

{periodValue.map((prd, idx) => (

changePeriod(prd)}>{prd}

))}

next.js에서 드롭다운 ui를 만드는중인데 option들이 담긴 영역을 위와 같이 일단 만들었습니다. 다른 요소를 클릭해 dropdown state가 true가 되면 위 요소의 height가 96px이 되어 스르륵 펼쳐지도록 했습니다. 스타일은 다음과 같이 했습니다. .option_box { position: absolute; top: 35px; left: -1px; font-size: .9rem; background-color: white; border: 1px solid rgba(0, 0, 0, .15); padding: 2px; width: 62px; border-radius: 7px; z-index: 5; transition: height .2s; box-sizing: border-box; overflow-y: hidden; } .option_box > div { display: flex; align-items: center; width: 100%; height: 30px; padding: 8px; border-radius: 3px; }그런데 dropdown이 false여서 option_box 요소가 접혀있을 때, height가 0인데 요소가 완전히 안보이지 않고 height가 6px인 상태로 조그맣게 남아있더라구요. border가 위아래로 각각 1px이고, padding이 위아래로 각각 2px이니 합쳐서 총 6px이 남아있나 싶어서 box-sizing을 border-box로 해봤는데도 똑같더라구요. box-sizing을 border-box로 하면 요소의 크기가 padding과 border까지 합쳐져서 정해지는걸로 알고있는데.. 왜 option_box요소가 height가 0이 되어도 실제 height가 6px이 남아있는걸까요 ㅠ 일단 border-box로 해도 안돼서 dropdown state가 true일때 border도 0으로 만드는 방식으로 해서 해결은 했습니다. 여기서 또 의아한게 border만 없애도 요소가 다 없어지더라구요. padding도 없애야할 줄 알았는데 이건 또 왜이런지 흠..근데 아무튼 왜 box-sizing을 border-box로 해도 padding과 border 크기가 남아있는걸까요. 이유를 모르겠습니다.

ywk0205 · Answer

.option-box일때 왜 height가 6px인지 물어보시는 걸까요? Padding 4px(위아래), border 2px(위아래)이어서 전체 6px이 나오는게 아닌가 싶습니다. 그리고 요소를 보이고 싶지 않으면 height를 0으로 설정하는 대신 display: none을 사용하여 처리하실 수도 있습니다.

box-sizing 속성 질문

1개의 답변

Q&A 목록