border-box 설정 시 div 안의 내부 div의 width값 계산 채택완료

border-box으로 설정하게되면

width값에 내부패딩, 테두리 값이 모두 포함이 되는것 알고있습니다.

테스트 중에

1. 부모 div태그에서 테두리 값을 설정하고

자식 div태그에서 border-bottom 부분만 테두리를 설정하였는데

내부에서 정한 테두리 선이 부모 테두리 선을 조금 벗어나버리는 형태가 되어버리네요

이런 경우는 왜 그러는걸까요?

2. 부모태그에서 테두리를 설정했을 시 자식div의 width에도 부모태그에서 정한 테두리값이 포함되어 있는 것을까요?
(개발자도구에 찍어봤을때는 자식div에 부모태그에서 정한 width값이 포함되어 있는 형태가 아닌것 같았습니다.)

.test{

  width:300px; height: 100px;

  border:1px solid black;

  box-sizing: border-box;

}

<div class="test" >

    부모

    <div style="width:300px; box-sizing: border-box; border-bottom: 1px solid black;" >

      자식

    </div>

  </div>