スタイルboxSizingプロパティ
例
boxSizingプロパティを変更します。
document.getElementById("myDIV").style.boxSizing = "border-box";
定義と使用法
boxSizingプロパティを使用すると、特定の要素を定義して、特定の方法で領域に合わせることができます。
たとえば、2つの境界ボックスを並べて配置する場合は、boxSizingを「border-box」に設定することで実現できます。これにより、ブラウザは指定された幅と高さでボックスをレンダリングし、ボックス内に境界線とパディングを配置します。
ブラウザのサポート
Property | |||||
---|---|---|---|---|---|
boxSizing | Yes | Yes | Yes | Yes | Yes |
構文
boxSizingプロパティを返します。
object.style.boxSizing
boxSizingプロパティを設定します。
object.style.boxSizing = "content-box|border-box|initial|inherit"
プロパティ値
Value | Description |
---|---|
content-box | Default value. This is the behavior of width and height as specified by CSS2.1. The specified width and height (and min/max properties) apply to the width and height respectively of the content box of the element. The padding and border of the element are laid out and drawn outside the specified width and height |
border-box | The specified width and height (and min/max properties) on this element determine the border box of the element. That is, any padding or border specified on the element is laid out and drawn inside this specified width and height. The content width and height are calculated by subtracting the border and padding widths of the respective sides from the specified 'width' and 'height' properties |
initial | Sets this property to its default value. Read about initial |
inherit | Inherits this property from its parent element. Read about inherit |
技術的な詳細
デフォルト値: | コンテンツボックス |
---|---|
戻り値: | 要素のボックスサイズ設定プロパティを表す文字列 |
CSSバージョン | CSS3 |
関連ページ
CSSリファレンス:ボックスサイズ設定プロパティ
❮スタイルオブジェクト