• Q&A
  • 회원가입
  • 로그인

[box] CSS - box-sizing 속성 ★★ - 너비결정방식 (= 길이결정방식 = box-sizing속성 = 박스사이징속성)

목차
  1. box-sizing 예제 - 요소 너비 계산 방식 선택
  2. box-sizing 정의
  3. box-sizing 구문
  4. box-sizing:border-box; 경우, 전체 차지 너비

 

box-sizing 예제 - 요소 너비 계산 방식 선택 

 

<style> 

#hz_cb h2 {color:blue;}

#hz_cb div {

    box-sizing: content-box  /* 요소너비 = width + padding + border */

    width: 400px;

    height: 100px;

    padding: 30px;    

    border: 10px solid blue;

}


#hz_bb h2 {color:red;}

#hz_bb div {

    box-sizing: border-box;  /* 총너비 = width */

    width: 400px;

    height: 100px;

    padding: 30px;    

    border: 10px solid red;

}

</style>

</head>

<body>


<div id="hz_cb">

  <h2>box-sizing: content-box (기본값)</h2>

  <p>padding, border : 총너비에 포함 O</p>

  <div>

    총너비 480px = width 400 + padding (30 x 2) + border (10 x 2)<br>

    홈짱닷컴 (Homzzang.com)

  </div>

</div>

  

<div id="hz_bb">

  <h2>box-sizing: border-box</h2>

  <p>padding, border : 총너비에 포함 X</p>

  <div>

    총너비 400px = width 400<br>

    홈짱닷컴 (Homzzang.com)

  </div>

</div>


결과 보기

 

box-sizing 정의

 

(박스너비 = 박스전체너비 =박스총너비) 결정방식.

즉, 

너비・높이 계산 시, padding・ border 포함여부 결정.

 


 

1.

  • 기본값: content-box
  • 상속여부: X
  • 애니효과: X
  • CSS버전: CSS3
  • JS구문: object.style.boxSizing="border-box"

 

2.

IE8 이상 주요 최신브라우저 지원.

 

 

box-sizing 구문

 

selector {box-sizing: content-box|border-box|initial|inherit;}

 


[속성값]

 

content-box

너비 = (width + 좌우border + 좌우padding)

 

border-box

너비 = (width)

 

initial

이 속성의 기본값으로 설정.

 

inherit

부모요소의 속성값 상속.

 

 

box-sizing:border-box; 경우, 전체 차지 너비

 

width + (좌우margin)

 

※ padding, border 값은 너비에서 제외.


방문 감사합니다. (즐겨찾기 등록: Ctrl + D)

찾아주셔서 감사합니다. Since 2012