Remove space in modules

All modules in mono have a predefined spacing that defines the spacing between the particular module and the next module on the page. This spacing can be different from design skin to design skin to balance nicely with the font styles and sizes for each skin. In most cases, the predefined spacing works really well and no adjustments are needed. However, in some cases it can be helpful to remove this spacing to create special design and visual effects. For example, you can remove the spacing in order to make two modules appear as one entity.

In the mono tool you have the ability to remove the predefined spacing completely in every module. You can then use the spacer module to set customized spacing between your modules or keep the spacing completely removed. Below are a few examples of how removing the predefined spacing can work to enhance the design and/or function of a site.


In the above example you will see that the ‘Facts’ box is actually created by setting two modules together. In illustration A you see a Bar module with a Body text module sitting underneath it. In Illustration B you’ll see what happens when the module spacing is removed from the Bar module and a 6-pixel high spacer module is placed underneath it. This creates a nicer and more tightly stacked effect.  This way, these modules appear as one rather than two separate modules.

In the above example you see three full-width modules where the spacing on each module is removed. The top module (A) is a Jumbotron module with spacing removed so that the module under (B – a full-width text module) sits exactly underneath. Below this is again the same concept with a full-width 3 column module that sits exactly under the module above. By removing the space in these modules you can separate the pages in a much more manageable way (when considering the different background colors) while emphasizing the phone number in module B.