높이 : 0 패딩을 숨기지 않는 이유

높이 : 0 패딩을 숨기지 않는 이유

, 심지어 box-sizing : border-box?

---

내가있어 <div>패딩. 나는 그것을 설정 한 height: 0, 그것을 제공 overflow: hidden하고 box-sizing: border-box.

HTML

<div>Hello!</div>

CSS

div {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    height: 0;
    overflow: hidden;

    padding: 40px;

    background: red;
    color: white;
}

http://jsfiddle.net/FA29u/2/

내가 이해했듯이 이것은 <div>사라질 것입니다.

그러나 여전히 표시됩니다 (Mac의 Chrome 31 및 Firefox 25). height선언은에도 불구하고, 패딩에 적용하지 않는 것으로 box-sizing선언.

예상되는 동작입니까? 그렇다면 그 이유는 무엇입니까? 의 MDN 페이지box-sizing 는이 문제를 언급하지 않는 것 같습니다.

내가 말할 수 있는 한, 사양 도 아닙니다. 너비와 높이 모두 box-sizing: border-box(또는 실제로 padding-box) 설정 되었을 때 패딩을 포함해야한다고 읽습니다 .

---

정확한 정의 border-box는 다음과 같습니다.

즉, 요소에 지정된 패딩 또는 테두리가이 지정된 너비와 높이 내에 배치되고 그려집니다. 콘텐츠 너비와 높이는 지정된 'width'및 'height'속성에서 각면의 테두리 및 패딩 너비를 빼서 계산됩니다.

당신이 높이에게 폭 속성을 수정하지만, 그래서 padding및 border변경하지 마십시오.

콘텐츠 너비와 높이는 음수가 될 수 없으므로 ([CSS21], 섹션 10.2)이 계산은 0으로 내려갑니다.

그런 다음 height0이면 높이가 음수임을 의미하기 때문에 안쪽 여백을 만들 수 없습니다.

---

의 선언 height: 0;이 적용됩니다. 으로두면 height: auto;20px 차이 ( "Hello!"가있는 줄의 높이)가 표시되어 총 100px 높이가됩니다. 높이를 0으로 설정하면 높이가 80px에 불과합니다.padding-top + padding-bottom = 80px

따라서 대답은 예, 예상되는 동작입니다.

너비와 높이를 ~ 사이의 값으로 설정할 수 0있으며 80px(패딩이 40px 인 경우) 여전히 동일한 크기를 얻을 수 있습니다.

업데이트 : Hardy가 언급했듯이 추가 래퍼 div를 사용하면이 문제를 해결할 수 있습니다.

데모

HTML :

<div class="div-1">
    <div class="div-2">
        Hello!
    </div>
</div>

CSS :

.div-1 {
    padding: 40px;

    /* This is not visible! */
    border: 1px solid dashed;
}
.div-2 {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    height: 0px;
    width: 0px;
    background: red;
    color: white;
    overflow: hidden;
}

참고 URL : https://stackoverflow.com/questions/20827367/why-doesn-t-height0-hide-my-padded-div-even-with-box-sizingborder-box