custom-indent-block-classes.html 1.3 KB

123456789101112131415161718192021222324252627282930313233343536373839
  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. .custom-block-indent-d {
  12. margin-left: 40%;
  13. }
  14. .custom-block-indent-e {
  15. margin-left: 50%;
  16. }
  17. </style>
  18. <div id="snippet-indent-block-classes">
  19. <h2>Block indentation using CSS classes</h2>
  20. <p>If you want more semantics in your content, use CSS classes instead of fixed indentation units. You can then adjust
  21. the levels in the styles sheets of your application whenever you want.&nbsp;</p>
  22. <h3 class="custom-block-indent-a">This heading has the <code>.custom-block-indent-a</code> class</h3>
  23. <p class="custom-block-indent-a">And this paragraph shares the same class, and that puts it at the same level.</p>
  24. <h4 class="custom-block-indent-b">But this one has the <code>.custom-block-indent-b</code> class</h4>
  25. <p class="custom-block-indent-b">Using classes instead of fixed units (<code>px</code> or <code>em</code>) has another
  26. advantage. You retain control over what indentation levels are used in the documents. For instance, you can limit
  27. indentation to 2 or 3 different levels and there is no way users can go beyond that (<code>.custom-block-indent-e</code> class level).
  28. That should help you keep your content clean and predictable.</p>
  29. </div>