余白には「padding（「詰め物」の意）」と「margin（「へり・余白」の意）」の2種類があります。
「padding」は「境界の内側の余白」です。
paddingなしで背景色を指定した場合
paddingなしで境界線を指定した場合
padding30ピクセルで背景色を指定した場合
padding30ピクセルで境界線を指定した場合
たとえばこのページの見出し1「Webサイトを作ろう！（CSS編）」は、以下のようにpaddingを設定しています。
h1{
padding:20px 10px;
}
「20px 10px」は「上下が20ピクセル・左右が10px」という意味です。「padding:20px;」だけだと「四方が20ピクセル」、「padding:10px 20px 30px 40px;」だと「上が10ピクセル・右が20ピクセル・下が30ピクセル・左が40ピクセル」という指定になります。
また、「padding-top:20px;」のように上下左右（top・bottom・left・right）のいずれかだけを指定することもできます。
「margin」は境界の外側の余白です。
上部にmarginの指定なし
上部に100ピクセルのmargin
上下左右の設定の方法はpaddingと同じです。
このページが余白をどのように指定しているか、見てみましょう。
「web.css」を変更して、余白をつけてください（見出しにpaddingやmarginを指定する、body部に横幅を設定して中央に表示する等）。