Extra spaces in SharePoint content

Office365 SP2013 SP2016

Sometimes when adding content to a SharePoint page, such as a web part or custom code, you may find some items are not properly aligned or have more space between them then you expected. (see image below)

The reason for this is that SharePoint will sometimes add extra characters to the page's markdown which cannot be seen in the Source Editor. Instead, you need to open your browser's developer console (by pressing f12), navigate to the misaligned element, and find characters like ​ in the image below

To remove  remove a single hidden character from a specific part in the page:

1. Open the page in edit mode
2. Open your browser's developer console by pressing F12 on your keyboard
3. Find the misaligned item and the hidden character.
4. Select the character and delete it. 
5. Confirm that the space has been removed and you didn't erase the wrong thing. You can use CTRL+Z to undo your actions.
6. Once the character is removed you can close de developer console and save the page.
7. The space should now be removed.

If you want to remove all the hidden characters from a page:

1. Open the page in edit mode
2. Open your browser's developer console by pressing F12 on your keyboard
3. Press the console tab
4. Paste the following snippet into the console and press Enter to execute the code

   var contentZone = $('#DeltaPlaceHolderMain');
   contentZone.html(contentZone.html().replace(/\u200B/g,'').replace(/\u8203/g,''));

   
5. Now that the characters are removed, you can close the developer console and save the page.
6. The spaces should now be removed.