8個のプロパティ
FlexboxやGridで要素間の間隔を指定するプロパティです。marginより直感的で管理しやすいです。
.flex-container {
display: flex;
gap: 1rem;
}要素の内側の余白を指定するプロパティです。
padding: 16px;要素の外側の余白を指定するプロパティです。
margin: 0 auto;要素の横幅を指定するプロパティです。px, %, vw, emなど様々な単位が利用できます。
width: 100px;要素の高さを指定するプロパティです。px, %, vh, emなど様々な単位が利用できます。
height: 200px;要素の最大幅を指定するプロパティです。widthと組み合わせてレスポンシブなデザインが可能です。
max-width: 600px;要素の最小幅を指定するプロパティです。レイアウトの崩れ防止やレスポンシブ対応に役立ちます。
min-width: 120px;要素のサイズ計算方法を指定するプロパティです。モダンCSS開発では必須です。
* {
box-sizing: border-box;
}