custom-indent-block-classes.html 907 B

1234567891011121314151617181920212223242526272829
  1. <style>
  2. .custom-block-indent-a {
  3. margin-left: 10%;
  4. }
  5. .custom-block-indent-b {
  6. margin-left: 20%;
  7. }
  8. .custom-block-indent-c {
  9. margin-left: 30%;
  10. }
  11. </style>
  12. <div id="snippet-indent-block-classes">
  13. <h2>Block indentation using CSS classes</h2>
  14. <p>This is a normal paragraph with no indentation applied.</p>
  15. <h3 class="custom-block-indent-a">This heading has the <code>.custom-block-indent-a</code> class</h3>
  16. <p class="custom-block-indent-a">This paragraph shares the same class and that puts it at the same level.</p>
  17. <h4 class="custom-block-indent-b">But this one has the <code>.custom-block-indent-b</code> class</h4>
  18. <p class="custom-block-indent-b">This paragraph shares the same indentation class.</p>
  19. <p class="custom-block-indent-c">This paragraph has the <code>.custom-block-indent-c</code> class. This is the maximum indentation level allowed in the configuration.</p>
  20. </div>