WEB技術の辞書・解説・使用例

TOP > CSS >  CSS辞典 > margin
margin  余白 

ボックス外側の余白を指定する。

このエントリーをはてなブックマークに追加

書式例

margin : 上下左右 ; ( 例 margin : 5px ; )
margin : 上下 左右 ; ( 例 margin : 5px 3px ; )
margin : 上 左右 下 ; ( 例 margin : 5px 3px 8px ; )
margin : 上 右 下 左 ; ( 例 margin : 5px 3px 8px 2px; )

サンプルコード


<div style="border:1px solid blue; background-color: #f8dce0;margin:10px;">margin:10px;</div>
<div style="border:1px solid blue; background-color: #f8dce0;margin:10px 20px;">margin:10px 20px;</div>
<div style="border:1px solid blue; background-color: #f8dce0;margin:10px 20px 30px">margin:10px 20px 30px;</div>
<div style="border:1px solid blue; background-color: #f8dce0;margin:10px 20px 30px 40px;">margin:10px 20px 30px 40px;</div>
margin:10px;

margin:10px 20px;

margin:10px 20px 30px;

margin:10px 20px 30px 40px;

marginとpaddingの違い

marginはボックスの外側の余白です。paddingはボックスの内側の余白です。
<div style="margin:10px;">margin:10px;</div>
<div style="padding:10px;">padding:10px;</div>
<div style="margin:10px;padding:10px;">margin:10px;padding:10px;</div>
margin:10px;
padding:10px;
margin:10px;padding:10px;