indent-block-classes.html 812 B

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849
  1. <head>
  2. <style>
  3. body {
  4. max-width: 800px;
  5. margin: 20px auto;
  6. }
  7. .indent-1 {
  8. margin-left: 20px;
  9. }
  10. .indent-2 {
  11. margin-left: 40px;
  12. }
  13. .indent-3 {
  14. margin-left: 60px;
  15. }
  16. .indent-4 {
  17. margin-left: 80px;
  18. }
  19. </style>
  20. </head>
  21. <div id="editor">
  22. <h2>Heading 1</h2>
  23. <p class="indent-1">Paragraph</p>
  24. <p><strong>Bold</strong> <i>Italic</i> <a href="https://ckeditor.com">Link</a></p>
  25. <ul>
  26. <li>UL List item 1</li>
  27. <li>UL List item 2</li>
  28. </ul>
  29. <ol>
  30. <li>OL List item 1</li>
  31. <li>OL List item 2</li>
  32. </ol>
  33. <figure class="image image-style-side">
  34. <img alt="bar" src="sample.jpg">
  35. <figcaption>Caption</figcaption>
  36. </figure>
  37. <blockquote>
  38. <p>Quote</p>
  39. <ul>
  40. <li>Quoted UL List item 1</li>
  41. <li>Quoted UL List item 2</li>
  42. </ul>
  43. <p>Quote</p>
  44. </blockquote>
  45. </div>