코드랩 레퍼런스

box-sizing 본문

CSS

box-sizing

webstoryboy 2016. 6. 17. 17:48
box-sizing 속성은 크기 및 높이 여부의 포함을 설정합니다.

Summary

특징 설명
기본 값 content-box
상속 안됨
애니메이션 안됨
버전 CSS3

Definition

  • box-sizing 속성은 크기 및 높이 여부의 포함을 설정합니다.
  • 블록요소에 width 값은 padding, border, margin이 포함된 값입니다. 즉 width 값은 100% 값을 초과 할 수 있지만 border-box을 설정하면 width 값은 100%를 초과 할 수 없습니다.

Syntax

box-sizing : content-box | border-box | inherit;

Property

속성 값 설명
content-box 요소에 border, padding 값이 포함되어 있지 않습니다.
border-box 요소에 border, padding 값이 포함됩니다.
inherit box-sizing의 속성 값을 상위요소한테 상속받습니다.

Compatibility

크롬 아이콘 파이어폭스 아이콘 사파리 아이콘 오페라 아이콘 안드로이드 아이콘 ios 아이콘 익스플로러6 아이콘 6 익스플로러7 아이콘 7 익스플로러8 아이콘 8 익스플로러9 아이콘 9 익스플로러10 아이콘 10 익스플로러11 아이콘 11 엣지 아이콘
box-sizing

Sample

box1 {
        padding : 10px
        border : 2px solid #fff;
}
box2 {
        padding : 10px
        border : 2px solid #fff;
}


Ad

Comments