유용한 자료
< 자료공유 < 유용한 자료
기타자료실

css | box-sizing 속성

페이지 정보

작성자 madalla 작성일17-12-05 14:58 조회72회 댓글0건

본문

border 값을 지정할 때 지정 넓이 값 이외 border 값이 따로 나오는 것을 해결

예를 들면 width:300px이고 border가 2px이면 가로 넓이는 304px이 됨.

 

%로 작업하게 될 때 머리 아파짐.

box-sizing: border-box; 로 잡으면 border 값과 함께 넓이를 잡아줌.

자동으로 206px에 border 값 4px을 잡아 넓이 300px을 잡아줌.

 

 

.test {
  width: 500px;
  margin: 20px auto;
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
}

.test2 {
  width: 500px;
  margin: 20px auto;
  padding: 50px;
  border: solid blue 10px;
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
}
 

전체 규정은

* {
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
}

  • 페이스북으로 보내기
  • 트위터로 보내기
  • 구글플러스로 보내기