Spacing — margin and padding
This page needs a recent browser (with SharedArrayBuffer support). Please update Chrome, Edge, Firefox or Safari to the latest version. · このページには最新のブラウザ（SharedArrayBuffer対応）が必要です。Chrome、Edge、Firefox、Safariを最新バージョンに更新してください。
English
Space between boxes
- Margin is the space outside a box — the gap to its neighbours.
margin: 30px;adds 30 pixels on all four sides, outside the border.- Padding pushes the content in; margin pushes other boxes away.
日本語
ボックス間のスペース
- マージンはボックスの外側にあるスペース — 隣接するボックスとの間隔です。
margin: 30px;がボーダーの外側にすべての4辺に30ピクセルを追加します。- パディングは内部のコンテンツを押し広げ、マージンは他のボックスを押し広げます。
English
One side at a time
- You can space just one side:
margin-top,margin-right,margin-bottom,margin-left. - The same works for padding:
padding-left: 10px;, and so on. margin-bottomunder a heading neatly separates it from the text.
日本語
一度に1辺ずつ
- 特定の1辺だけを指定してスペースを設定できます：
margin-top、margin-right、margin-bottom、margin-left。 - パディングにも同様の操作が可能です：
padding-left: 10px;、など。 margin-bottomは見出しの下に配置され、テキストとすっきりと区切られます。
<style>
.tag {
background-color: gold;
padding: 6px;
margin-right: 8px;
}
</style>
<span class="tag">news</span>
<span class="tag">sport</span>
English
Common mistakes
- Padding is inside the border; margin is the space outside it.
box-sizing: border-boxmakes the width include padding and border.
日本語
よくあるミス
- パディングはボーダーの内側にあり、マージンはその外側のスペースです。
box-sizing: border-boxを使用すると、幅にパディングとボーダーが含まれます。
English
Now you try
- Margin is the gap between boxes; padding is the space inside one.
- Add margin around a box, then space below a heading.
日本語
あなたも試してみよう
- マージンはボックス間の間隔であり、パディングは1つのボックス内のスペースです。
- ボックスの周囲にマージンを追加し、見出しの下にスペースを追加します。
Explore · 探索
margin vs padding
Padding is space inside the border; margin is space outside.
Push the boxes apart from each other. Add margin: 30px; to the .box rule.
Add space below the heading only. Add h1 { margin-bottom: 24px; }.