Removing Space Between Paragraphs

[spencey]

On this page:

Our Team

I need to be able to remove the space between the title and the person’s name without the heading levels merging into the heading level of the title.

On this page I used non breaking spaces to achieve what I needed to make the bullets flush with their headings:

Practice Management

How can I remove the space and maintain the correct formatting?

[jade]

Hi @spencey,

There are default margins that are set to the heading elements and the paragraphs.

A way to get rid of those margins is to make use of some of class helpers available with X.

@ThemecoKB

Spacing Helpers

In order for pages to be structured properly, all elements must receive some type of margin or padding for adequate spacing. While this spacing is beneficial in most cases, it might be something you wish to remove or modify at other times. We have provided plenty of helper classes to use in these instances. These helper classes allow you to modify the margin and padding of elements by removing the spacing completely, or adding a small, medium, or large amount of spacing. These classes are an acronym built from three different parameters:

1. Margin (m) or padding (p).
2. Top (t), left (l), right (r), bottom (b), vertical (v), horizontal (h), or all (a).
3. None (n), small (s), medium (m), or large (l).

For example, if you wanted to add a class that removed all of the margin from the top of an element you would use mtn, which stands for margin top none. Alternately, if you wanted to add a small amount of padding to both sides of an element you would use phm, which stands for padding horizontal medium.

To figure out where the spacing on an element is coming from, you can easily do this in Chrome. Simply right click on any element and select Inspect Element from the dropdown. This will reveal a popup at the bottom of your window, which will display HTML on the left and CSS on the right. You can hover over the HTML in the popup and select elements to see where any margin or padding is coming from. Margin is designated by a reddish/orange color and padding is designated by green.

Spacing: None

• mtn

• mrn

• mbn

• mln

• mvn

• mhn

• man

• ptn

• prn

• pbn

• pln

• pvn

• phn

• pan

Spacing: Small

• mts

• mrs

• mbs

• mls

• mvs

• mhs

• mas

• pts

• prs

• pbs

• pls

• pvs

• phs

• pas

Spacing: Medium

• mtm

• mrm

• mbm

• mlm

• mvm

• mhm

• mam

• ptm

• prm

• pbm

• plm

• pvm

• phm

• pam

Spacing: Large

• mtl

• mrl

• mbl

• mll

• mvl

• mhl

• mal

• ptl

• prl

• pbl

• pll

• pvl

• phl

• pal

To use these class helpers, you can these classes to the heading elements of the page.

For example, you can see above that there is a top margin above the name that is using the <h4> tag so you can edit it from:

<h4 style="text-align: center;">
    <strong>Jeffrey Atkin, MBA, MIS, CPHIMS, CNMT, CIIP<br></strong>
</h4>

to

<h4 class="mtn" style="text-align: center;">
    <strong>Jeffrey Atkin, MBA, MIS, CPHIMS, CNMT, CIIP<br></strong>
</h4>

Hope this helps.