余白を指定したい。

2015年6月20日

複数のタグを使用していてタグ間に余白を設けたい場合があります。
その時に使うプロパティが「paddingｰ**」プロパティです。

設定する使うプロパティは以下の通りです。
padding-top　上辺の内側の余白
padding-bottom　下辺の内側の余白
padding-left　左辺の内側の余白
padding-right　右辺の内側の余白
padding　４辺の内側の余白をまとめて書く

設定値
auto 自動
数値　数値にpxを付して書く
%　　割合を表すんですけど、いつ使うんだろう？？

    #container{
        width:960px;
        height:500px;
        background-color:greenyellow;

/*        
        padding-top:10px;
        padding-bottom:20px;
        padding-left:30px;
        padding-right:40px; 
*/        
        padding:10px 40px 20px 30px;
    }

    *{margin:0;padding:0;}

    .paddingtest{    
        width:100px;
        height:100px;
        background-color:aqua;}

#container{

width:960px;

height:500px;

background-color:greenyellow;

padding-top:10px;

padding-bottom:20px;

padding-left:30px;

padding-right:40px;

padding:10px 40px 20px 30px;

}

*{margin:0;padding:0;}

.paddingtest{

width:100px;

height:100px;

background-color:aqua;}

<!DOCTYPE html>
<html lang="ja">
<head>
	<meta charset="utf-8">
	<title>HTMLのメモ</title>
    <link rel="stylesheet" href="test.css">
</head>
<body>

<div id="container">

    <div class="paddingtest"></div>
 
</div>
</body>
</html>

<!DOCTYPE html>

<head>

<title>HTMLのメモ</title>

</head>

<body>

</div>

</body>

</html>

ソースコードを見て頂くとわかりますが、test.cssの６行目～１１行目が
コメントアウトされています。ですが、１３行目で「padding:10px 40px 20px 30px;」と
書いてあります。６行から１１行目と１３行名は同じ処理をしています。
ただ記載方法が違うだけです。

「padding」プロパティを使って設定する場合は。
「padding:上辺px 右辺px 下辺px 左辺px」の順に
半角スペースで区切って設定します。ほかのプロパティ
marginやborderでも同じ順番で設定を行います。