CSSボックスモデル

いわゆるボックスモデルは、html要素をボックスとして扱います。日常生活の中で最も一般的なアイテムは箱です。たとえば、月餅の箱には外箱があり、中には通常の鉄の箱があり、中にはプラスチックまたは紙の包装があり、大きな箱の中にいくつかの小さなパッケージがあります。同様に、HTML の各タグは形をしたボックスとみなされ、タグ間の関係はボックスとボックスの関係とみなすことができます。

ボックスモデルは以下で構成されます: コンテンツ: 要素が提示したいもの

Padding:コンテンツと境界線の間の距離

ボーダー

マージン：ボックス間の距離

width属性とheight属性は、コンテンツ（コンテンツ）の幅と高さの属性であり、要素の幅と高さではありません。

要素の幅 = 左マージン + 左ボーダー + 左パディング + 幅 + 右パディング + 右ボーダー + 右マージン

要素の高さ = 上マージン+上ボーダー+上パディング+高さ+下パディング+下ボーダー+下マージン

上記の式から、各エッジのプロパティを個別に（時計回りに）設定できることが推測できます。

例：padding:10px;（padding:10px 10px 10px 10px;の設定と同等）

padding:10px 20px; (padding:10px 20px 10px 20px; と同等)

Padding:10px 15px 20px; (padding:10px 15px 20px 15px; と同等)

他の余白や枠線についても同様です。