inline_formatting_01.rml 3.4 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455
  1. <rml>
  2. <head>
  3. <title>Inline formatting 01</title>
  4. <link type="text/rcss" href="../style.rcss"/>
  5. <link rel="help" href="https://www.w3.org/TR/css-inline-3/#model" />
  6. <meta name="Description" content="Test various inline formatting details." />
  7. <style>
  8. body {
  9. width: 1020px;
  10. padding: 0;
  11. border: 12px #ddd;
  12. }
  13. hr {
  14. clear: both;
  15. margin: 15px;
  16. display: block;
  17. }
  18. span {
  19. color: red;
  20. }
  21. span.outer {
  22. padding: 5px;
  23. border: 4px #ee0;
  24. margin: 5px;
  25. }
  26. span.inner {
  27. padding: 5px;
  28. border: 2px #00e;
  29. margin: 5px;
  30. }
  31. .paragraph {
  32. margin: 15px 0;
  33. }
  34. .inner-blocks span.inner {
  35. display: inline-block;
  36. }
  37. .inline-blocks span {
  38. display: inline-block;
  39. }
  40. </style>
  41. </head>
  42. <body rmlui-debug-layout>
  43. <div class="paragraph" id="plain">In consectetur, neque dignissim tincidunt dapibus, leo metus molestie erat, eu pharetra velit nunc in ipsum. Donec aliquet malesuada iaculis. Quisque maximus urna in congue placerat. In hac habitasse platea dictumst. Mauris a fringilla augue. Donec posuere ante at orci efficitur porttitor vitae ac tellus.<br/>Nunc nec sapien orci. Sed rhoncus et dui sed sagittis. Nullam venenatis quis elit vel mattis. In mattis erat et blandit aliquam. Aliquam erat volutpat.</div>
  44. <hr/>
  45. <div class="paragraph">In consectetur, neque dignissim tincidunt dapibus, <span class="outer">leo metus <span class="inner">molestie erat</span>, eu pharetra <span class="inner">velit nunc</span> in ipsum. Donec aliquet <span class="inner">malesuada iaculis.</span></span> Quisque maximus urna in congue placerat. In hac habitasse platea dictumst. Mauris a fringilla augue. Donec posuere ante at orci efficitur porttitor vitae ac tellus.<br/>Nunc nec sapien orci. Sed rhoncus et dui sed sagittis. Nullam <span class="outer">&nbsp;<span class="inner">venenatis quis</span> <span class="inner">elit vel</span> mattis</span>. In mattis erat et blandit aliquam. Aliquam erat volutpat.</div>
  46. <hr/>
  47. <div class="paragraph inner-blocks" id="inner-blocks">In consectetur, neque dignissim tincidunt dapibus, <span class="outer">leo metus <span class="inner">molestie erat</span>, eu pharetra <span class="inner">velit nunc</span> in ipsum. Donec aliquet <span class="inner">malesuada iaculis.</span></span> Quisque maximus urna in congue placerat. In hac habitasse platea dictumst. Mauris a fringilla augue. Donec posuere ante at orci efficitur porttitor vitae ac tellus.<br/>Nunc nec sapien orci. Sed rhoncus et dui sed sagittis. Nullam <span class="outer">&nbsp;<span class="inner">venenatis quis</span> <span class="inner">elit vel</span> mattis</span>. In mattis erat et blandit aliquam. Aliquam erat volutpat.</div>
  48. <hr/>
  49. <div class="paragraph inline-blocks" id="inline-blocks">In consectetur, neque dignissim tincidunt dapibus, <span class="outer">leo metus <span class="inner">molestie erat</span>, eu pharetra <span class="inner">velit nunc</span> in ipsum. Donec aliquet <span class="inner">malesuada iaculis.</span></span> Quisque maximus urna in congue placerat. In hac habitasse platea dictumst. Mauris a fringilla augue. Donec posuere ante at orci efficitur porttitor vitae ac tellus.<br/>Nunc nec sapien orci. Sed rhoncus et dui sed sagittis. Nullam <span class="outer">&nbsp;<span class="inner">venenatis quis</span> <span class="inner">elit vel</span> mattis</span>. In mattis erat et blandit aliquam. Aliquam erat volutpat.</div>
  50. <handle size_target="#document"/>
  51. </body>
  52. </rml>