Using CSS to Control White Space

cms.ku.edu/headers  >  Using CSS to Control White Space

  • CSS allows you to add styles to HTML elements.
  • Advanced skill beyond basic site administration.
  • Classes already exist - no need to write or add your own CSS classes.
  • KU CMS Sunflower includes built-in CSS classes to increase or decrease the white space between elements.
  • Much better than using carriage returns to add empty paragraphs or empty headers.

Instructions for Adding Margin Classes:

  1. Switch the ‘Text format’ below your Content field from “Restricted HTML” to “Full HTML.”
  2. Then add the desired white space by adding one of the margin-bottom, margin-top or margin-left classes below to any HTML element (e.g., <p>, <h2>, <h3>, <div>, etc.)

Margin-bottom Classes

  • class=“mb-0” = 0rem of margin (0px)
  • class=“mb-1” = .25rem of margin (4px)
  • class=“mb-2” = .5rem of margin (8px)
  • class=“mb-3” = 1rem of margin (16px)
  • class=“mb-4” = 1.5rem of margin (24px)
  • class=“mb-5” = 3rem of margin (48px)

Margin-top Classes

  • class=“mt-0” = 0rem of margin (0px)
  • class=“mt-1” = .25rem of margin (4px)
  • class=“mt-2” = .5rem of margin (8px)
  • class=“mt-3” = 1rem of margin (16px)
  • class=“mt-4” = 1.5rem of margin (24px)
  • class=“mt-5” = 3rem of margin (48px)

Margin-left Classes

  • class=“ml-1” = .25rem of margin (4px)
  • class=“ml-2” = .5rem of margin (8px)
  • class=“ml-3” = 1rem of margin (16px)
  • class=“ml-4” = 1.5rem of margin (24px)
  • class=“ml-5” = 3rem of margin (48px)

Mission

Sed porttitor lectus nibh. Quisque velit nisi, pretium ut lacinia in, elementum id enim. Vestibulum ac diam sit amet quam vehicula elementum sed sit amet dui. Cras ultricies ligula sed magna dictum porta.

  • List item
  • List item
  • List item

Vision

Proin eget tortor risus. Proin eget tortor risus. Vestibulum ac diam sit amet quam vehicula elementum sed sit amet dui. Curabitur non nulla sit amet nisl tempus convallis quis ac lectus.

Indented Sub-Section

Proin eget tortor risus. Proin eget tortor risus. Vestibulum ac diam sit amet quam vehicula elementum sed sit amet dui. Curabitur non nulla sit amet nisl tempus convallis quis ac lectus.

Questions

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras ultricies ligula sed magna dictum porta. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec velit neque, auctor sit amet aliquam vel, ullamcorper sit amet ligula. Lorem ipsum dolor sit amet, consectetur adipiscing elit.