CSSでのパディング(padding)の扱い

我々は、境界線から外側に向かって間隔を取るプロパティ margin について学びました。 同様に、境界線から内側に向かって間隔を取る、非常によく似たプロパティ padding も存在します。

では、実際の例を通してこのプロパティの働きを見てみましょう。まずは間隔がないブロックを提示します（テキストが境界線に接着しています）：

html<div id="elem">
  some long text
</div>

css#elem {
  width: 300px;
  border: 1px solid red;
  text-align: justify;
}

Результат:

次に、全方向に対して 30px の padding を設定します：

html<div id="elem">
  some long text
</div>

css#elem {
  padding: 30px;
  width: 300px;
  border: 1px solid red;
  text-align: justify;
}

Результат: