Spacing

Good web-design follows set rules. With that in mind, spacing on websites should be standardized across different components and pages. The Munroe base theme uses five different default spacers, 10px, 15px, 30px, 60px, 80px. This means that whenever space is added between two elements, it should be one of the five standard values. If your project calls for different spacing values, we can adjust the defaults, but you should limit your spacing variations and ensure that they are standardized throughout the project.

Module Spacing

Section spacing refers to the spacing between the module components of a page — not the elements within each section. The Munroe base theme’s sections have padding on the top and bottom of 80px at desktop sizes, and 40px at mobile sizes. If your project calls for different section spacing values we can adjust the defaults, but ensure that the section spacing is consistent throughout the project.

Setting your Sections to use Grid Spacing

When you want to combine two separate sections but have them appear as one, you can reduce the section spacing to match the space between columns in a row. For information on column spacing specifications at different viewport sizes, consult our documentation on grids.