CSS_ padding とは

pad      [ 可名 ] [ 動 ]:詰め物、詰め物をする。
padding   [ 不可名 ]:詰め物をすること、詰め物。

 

要素内空白のこと。
赤い矢印の箇所が padding
人間で例えるなら、要素「今日の出来事」が骨や内臓。
padding が脂肪。

f:id:koshinRan:20170731223100j:plain

 

ex)

0 px padding (余白無し)
f:id:koshinRan:20170731225127j:plain

CSS

h1 {
    background-color: #FFE4C4;
    padding: 0px;
    width: 200px;
}

 

20 px padding
f:id:koshinRan:20170731225234j:plain

CSS

h1 {
    background-color: #FFE4C4;
    padding: 20px;
    width: 200px;
}

 

○HTML

<!DOCTYPE html>
<html lang="jp">
<head>
 <meta charset="UTF-8">
 <title>test</title>
 <link rel="stylesheet" type="text/css" href="CSS.css" />
</head>


<body>
 <h1>今日の出来事</h1>
</body>
</html>

 

設定方法は 2 通りある

個別に指定

padding-top:          Xpx;
padding-right:        Xpx;
padding-bottom:   Xpx;
padding-left:          Xpx;

 

一括で指定
padding: Xpx; 四方向共通
padding: Xpx Ypx; 上下  上下
padding: Xpx Ypx Zpx;   左右 
padding: Xpx Ypx Zpx Wpx;      

 

こちらから。
http://taneppa.net/margin_padding/
http://www.tagindex.com/stylesheet/box/padding.html
http://www.html5-memo.com/first-html5/html5-001/

 

以上。

---Memo---
margin は要素間の間隔。
f:id:koshinRan:20170731223557j:plain
上記の場合、「昨日」・「今日」どちらも margin 5px にしたならば、
赤矢印の長さは多分 10 px となる。