2021年2月

CSSのbox-sizingにはないmargin-boxを疑似的に再現する小技

CSSのbox-sizingプロパティには、widthプロパティやheightプロパティなどで指定した幅を、要素のコンテンツ領域に適用するcontent-box (既定値) と、要素の境界 (border) まで適用するborder-boxがあります。

また、W3Cの草案に登場し、FireFoxにのみ先行実装された、要素の内側の余白まで適用するpadding-boxもあります (現在はFireFoxを含む全てのブラウザで使用できません)。

しかし、要素の外側の余白まで適用するmargin-boxというのはW3Cの草案にも登場しません。今回は、このmargin-boxを疑似的に再現する小技を紹介します。