Boxモデルとは?

HTML要素はボックスで構成されています.
各箱には内容があり、内容の周りにはpadding、border、marginが囲まれています.
コンテンツ(content):テキストまたは画像を含むボックスの実質的なコンテンツ部分
塗りつぶし(padding):コンテンツと枠線の間のギャップ
ボーダー(border):コンテンツとダウンジャケットを囲むボーダー
マージン(margin):枠線の外側

CSSでheightとwidthのプロパティを設定すると、そのサイズが示す部分はコンテンツ(コンテンツ)部分のみです.
HTML要素の高さと幅のプロパティ設定の高さと幅には、塗りつぶし、枠線、余白のサイズは含まれません.
注意:http://www.tcpschool.com/css/css_boxmodel_boxmodel

Padding

padding shorthand property充填サムネイル表示

四面同時適用

padding: 10px;

上下左右

padding: 5px 10px;

上、左、右、下

padding: 1px 2px 2px;

上、右、下、左(時計回り)

padding: 5px 1px 0 2px;

Border

Border properties

border-width: 2px;
border-style: solid;
border-color: black;

上記のコードは以下のように簡単に記述できます.

border: 10px solid black ;

枠を丸くする

border-radius: 10px
border-radius: 50%

Box-sizing

box-sizing: border-box;
box-sizeは、画面にボックスのサイズを表示する方法を変更する属性です.デフォルトでは、widthとheightはコンテンツを含むボックスのサイズを表します.(デフォルトはcontent-box).
そのため、ボーダーとダウンジャケットがあると、ダウンジャケットとボーダーの厚さのため、所望の大きさを見つけるのが難しい.box-sizeプロパティをborder-boxとして指定すると、ダウンジャケットと枠線を含むサイズを指定できるので、予測が容易になります.最近では、すべての要素にこの値を指定することが多くなりました.
注意:https://opentutorials.org/course/2418/13405

Margin

Margin Collapse利益相殺

利益相殺現象(または利益が重なる)は、上下の利益が重なる場合にのみ発生する.左右不相応.

2つのタグ間の利益が重なる
上、下のラベルの余白では、より大きな値が間の余白値になります.

親子の利益が重なる現象
親ラベル、子ラベルにマージン値がある場合、親ラベルが視覚的に効果がない場合は、子ラベルと親ラベルのマージン値に大きなエッジ値が使用されます.

タグにビジュアル要素がない場合、タグのマージン値は上、下の大きな値に相殺されます.

注意:https://velog.io/@raram2/mastering-margin-collapsing

Marginプロパティを使用して中央揃え

margin: 0 atuo;

0は上下のマージン値を除去し、atooは左右のマージンを均一に割り当てることを示します.
width値が指定されていない場合は、中央揃えはできません.