- Products -


Software


NEWS


Special



- Knowledge -


Category × Tag



- Like -

公開
作成日:2021/10/24
更新日:2022/3/4

【CSS】width:100%が効かずに親要素を飛び出てしまう、、という悩みはこれで解決!box-sizing

・margin/padding/borderを使ったときに、width:100%などがきかなくなり、親要素を飛び出て困る。という事象がけっこう発生する。

・これを解消するには、上記の幅を要素の幅として含めるためのスタイル指定をしてやる必要がある。

・デフォルトだと、含めないようになっている。

・box-sizing:content-box (これがデフォルト)
・box-sizing:border-box (こっちを指定する必要がある)

・全要素に「box-sizing:border-box」を指定すれば悩まずにすむので、基本こっちにした方が良い。

使い方



        *,
        *:before,
        *:after {
            -webkit-box-sizing: border-box;
            box-sizing: border-box
        }



参考


https://saruwakakun.com/html-css/reference/box-sizing

https://developer.mozilla.org/ja/docs/Web/CSS/box-sizing


Category



Tag




関連記事


{{tmp.name}}

{{article.category}} {{article.title}}