border-box 설정 시 div 안의 내부 div의 width값 계산

border-box 설정 시 div 안의 내부 div의 width값 계산

QA

border-box 설정 시 div 안의 내부 div의 width값 계산

답변 1

본문

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>

이 질문에 댓글 쓰기 :

답변 1

부모 넓이가 테두리 포함해서 300px
그럼 border를 제외하면 298px (검은 테두리 빼고 하얀부분의 넓이)
자식이 하얀부분 시작점부터 300px가면 1px는 부모랑 겹치고 1px가 튀어나오겠죠

답변을 작성하시기 전에 로그인 해주세요.
QA 내용 검색
질문등록
filter #div ×
전체 141
© SIRSOFT
현재 페이지 제일 처음으로