|
HTML HTML5 HTMLタグ スマートフォン |
CSS CSSプロパティ CSS・HTML便利ツール |
HTML色見本 配色組み合わせツール 特殊文字 |
JAVA Android |
PHP Smarty修飾子 EXCEL |
WEB技術の辞書・解説・使用例
書式例
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;