Travail avec les marges intérieures padding en CSS

Nous avons vu la propriété margin, qui crée une marge vers l'extérieur de la bordure. Il existe également une propriété très similaire padding, qui crée une marge vers l'intérieur de la bordure.

Voyons maintenant avec des exemples comment fonctionne cette propriété. Pour commencer, voici un bloc sans marges intérieures (son texte est collé aux bords) :

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

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

Результат:

Et maintenant, définissons padding à 30px pour tous les côtés :

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

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

Результат: