백분율 기반 패딩은 어떻게 결정됩니까?

Question

the spec에서 패딩의 백분율을 기준으로 포함 블록이 너비를 결정한다는 것을 알고 있습니다.

하지만이 예에서 포함하는 블록은 무엇입니까?

HTML :

<div id="outer"> 
    <div id="inner">&nbsp;</div> 
</div> 

스타일 :

* { 
    box-sizing: border-box; 
} 

#outer { 
    width: 100px; 
} 

#inner { 
    width: 50%; 
    padding: 5%; 
} 

이 #inner의 패딩 2.5px 또는 5px에로 계산되어? 어떤 일이 일어 났는지 설명 할 수있는 스펙 및/또는 외부 소스에 대한 링크. 왜 더 자세히 설명하겠습니까?

Answer 1

Box model - 8.4 Padding properties

상자에 들어있는 상자.

따라서 #inner의 패딩 이때 부모 요소 #outer 것 포함하는 블록에 기초 할 것이다.

#inner의 패딩은 5%입니다. 일반적으로, 하위 박스 박스 블록을 포함하는 역할을 생성

Visual formatting model - 9.1.2 Containing blocks

(DEV 도구에 의하면 스타일링 계산에 의해 확인); 우리는 박스가 그 자손들을위한 블럭을 "설정"한다고 말한다. "상자를 포함하는 블록"이란 문구는 생성되는 문구가 아니라 "상자가있는 포함하는 블록"을 의미합니다.

Answer 2

대답은 '예'입니다. MDN

에서

"백분율은 함유 블록의 너비를 참조 .."의 비율이 생성 된 폭에 대하여 계산