<!-- Блок с правилом padding: 10px -->
<div class="main-section">
  <!-- Параграф с правилом padding: 20px 30px -->
  <p class="paragraph">Параграф с текстом и внутренними отступами. padding: 20px 30px</p>
</div>

<!-- Параграф с правилом padding: 20px 30px -->
<p class="paragraph">Другой параграф с внутренними отступами. padding: 20px 30px</p>
:root {
 --padding: 10px;
}

p {
  --padding: 20px 30px;
}

.main-section {
  padding: var(--padding);
  
  background: #ffca28;
}

.paragraph {
  padding: var(--padding);
  
  background: #ff9800;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.