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

TOP > CSS >  CSS辞典 > padding
padding  余白 

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

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

書式例

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

サンプルコード


<div style="border:1px solid blue; background-color: #f8dce0;padding:10px;">padding:10px;</div>
<div style="border:1px solid blue; background-color: #f8dce0;padding:10px 20px;">padding:10px 20px;</div>
<div style="border:1px solid blue; background-color: #f8dce0;padding:10px 20px 30px">padding:10px 20px 30px;</div>
<div style="border:1px solid blue; background-color: #f8dce0;padding:10px 20px 30px 40px;">padding:10px 20px 30px 40px;</div>
padding:10px;
padding:10px 20px;
padding:10px 20px 30px;
padding: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;