無料ホームページ作成！ＣＳＳ・スタイルシート
外側との余白

無料ホームページ作成！CSS・例
外側との余白

結果には分かりやすくするために枠線を引いています。

margin属性

margin属性の指定

• margin:10px;(上下左右10px)
• margin:10px 20px;(上下10px、左右20px)
• margin:10px 20px 30px;(上10px、左右20px、下30px)
• margin:10px 20px 30px 40px;(上10px、右20px、下30px、左40px)

CSS・スタイルシートソース

margin:10px;
margin:10px 20px;
margin:10px 20px 30px;
margin:10px 20px 30px 40px;
 

結果

margin-・・・属性の指定

CSS・スタイルシートソース

margin-top:10px;
margin-right:10px;
margin-bottom:10px;
margin-left:10px;
 

結果

autoで指定

autoを使用する際は、widthやheightで範囲を指定してください。親ボックスの範囲も関係してきます。
この結果の場合横の幅を100pxにしていますのであまりの余白を自動で指定してくれます。

CSS・スタイルシートソース

margin:auto;
width:100px;
 

結果