[CSS] box-sizing


content-box

  • box-寸法デフォルト
  • width,height=コンテンツ領域のwidth,height
  • padding,borderはコンテンツ
  • に影響しない

    border-box

  • padding、枠線で内容値を変更(小さく)
  • borderも含まれています!
  • content-box vs border-box


    .content-box {
            padding: 20px;
            border: 10px solid orange;
    }
    .border-box {
            box-sizing: border-box;
            padding: 20px;
            border: 10px solid orange;
    }