유연한 패딩 일반 박스 모델에서

Question

이해 : 응답자인, 35 페이지에

에단 마 코트 쓴 :

a 요소에 유연 패딩을 설정, 당신의 상황이 폭입니다 요소 자체의

하면 다음과 같은 예를 살펴주십시오

.main-wrapper { 
 
    width: 98%; /*960px - to give some space on the viewport*/ 
 
} 
 

 
.box-one, 
 
.box-two { 
 
    width: 44.791666666667%; /* 430/960 */ 
 
    float: left; 
 
    margin: 30px 0 20px 0; 
 
    padding: 2.083333333333%; /* padding should be 20px*/ 
 
    text-align: center; 
 
} 
 

 
.box-one { 
 
    margin-right: 2.083333333333%; 
 
    /*margin is relative to the container (here 960px), so: 
 
     20/960 
 
    */ 
 
    background-color: red; 
 
} 
 

 
.box-two { 
 
    background-color: blue; 
 
}

<div class="main-wrapper"> 
 

 
    <div class="box-one"> 
 
    <p>box one here</p> 
 
    </div> 
 

 
    <div class="box-two"> 
 
    <p>box two here</p> 
 
    </div> 
 

 
</div>

내 질문은 :

그 책의 여백 설정에 쓴 무엇에 따르면 : 정확하지 않습니다. (그러나 그렇습니다!).

padding: 2.083333333333%; 

대신 : 우리는 고려 에 요소 폭 자체을해야하고 그 430px입니다. 그러나 문맥 값을 사용하면 4.x %가됩니다.

여기에 표시되지 않는 것은 무엇입니까?

Answer 1

본인이 언급 한 책을 읽지 않았으며 내가 인용 한 문장 주위에 컨텍스트가 없으므로 내용을 추측하기가 어렵습니다.

백분율

비율이 생성 된 박스의 함유 블록 [폭에 대하여 계산 ... : 만약 비율 패딩 계산 대해 specs에 reffer 경우

이것은, 상기 ]

따라서 백분율은 부모의 너비에 따라 계산되므로 2.083333333333% 값이 정확합니다.