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

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

QA

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>

 

이 질문에 댓글 쓰기 :

답변 2

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


<style>
.test{
  width:300px; height: 100px; 
  border:1px solid black;
  box-sizing: border-box;
}
.test > div {
    /* width:300px; */
    box-sizing: border-box;
    border-bottom: 1px solid black;
}
</style>
<div class="test" >
    부모
    <div >
      자식
    </div>
  </div>
답변을 작성하시기 전에 로그인 해주세요.
전체 141
QA 내용 검색
filter #div ×

회원로그인

(주)에스아이알소프트 / 대표:홍석명 / (06211) 서울특별시 강남구 역삼동 707-34 한신인터밸리24 서관 1404호 / E-Mail: admin@sir.kr
사업자등록번호: 217-81-36347 / 통신판매업신고번호:2014-서울강남-02098호 / 개인정보보호책임자:김민섭(minsup@sir.kr)
© SIRSOFT