누락 된 픽셀 수 CSS 높이

Question

display:inline-block, height:50px 및 margin 25px 위아래로 범위를 만들려고합니다. 래퍼 div는 높이가 100px이고 overflow: auto 속성을가집니다.

래퍼 div의 span + margin-top + margin-bottom = 높이의 세로 스크롤이 나타납니다.

나는 min-height를주는 것이 문제를 해결할 것이라는 것을 알고 있지만 전체 프로세스에서 몇 픽셀을 잃어 버리는 지 알고 싶다.

는 fiddle here 또는 아래의 데모를 참조하십시오

기본적으로

* { 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 
html, 
 
body { 
 
    width: 100%; 
 
    height: 100%; 
 
} 
 
#myToolbar { 
 
    background: lightgrey; 
 
    width: 100%; 
 
    height: 100px; 
 
    overflow: auto; 
 
    white-space: nowrap; 
 
} 
 
.toolbar-item { 
 
    display: inline-block; 
 
    width: 15%; 
 
    height: 50px; 
 
    margin: 25px 2.5%; 
 
    background-color: green; 
 
    box-sizing: border-box; 
 
    border: 0; 
 
}

<div id="myToolbar"> 
 
    <span class="toolbar-item"></span><span class="toolbar-item"></span><span class="toolbar-item"></span><span class="toolbar-item"></span><span class="toolbar-item"></span> 
 
</div>

Answer 1

는 인라인 및 인라인 블록 요소는 vertical-align: baseline로 설정됩니다.

vertical-align 값을 top/middle/bottom으로 변경하면 더 이상 재미있는 행동이 발생하지 않습니다.

From the MDN:

기준선

부모의 기준선 요소의 기준선을 정렬. <textarea>과 같이 대체 된 일부 요소의 기준선은 HTML 사양에 의해 지정되지 않습니다. 즉,이 키워드의 동작이 브라우저마다 다를 수 있습니다.

CSS vertical-align: top

* { 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 
html, 
 
body { 
 
    width: 100%; 
 
    height: 100%; 
 
} 
 
#myToolbar { 
 
    background: lightgrey; 
 
    width: 100%; 
 
    height: 100px; 
 
    overflow: auto; 
 
    white-space: nowrap; 
 
} 
 
.toolbar-item { 
 
    display: inline-block; 
 
    width: 15%; 
 
    height: 50px; 
 
    margin: 25px 2.5%; 
 
    background-color: green; 
 
    box-sizing: border-box; 
 
    border: 0; 
 
    vertical-align: top; 
 
}

<div id="myToolbar"> 
 
    <span class="toolbar-item"></span><span class="toolbar-item"></span><span class="toolbar-item"></span><span class="toolbar-item"></span><span class="toolbar-item"></span> 
 
</div>