Eliminate the "space after" on the...

User 2841028 Photo

Registered User
12 posts

Just wondering if there's any option for eliminating the "space after" on the paragraph element? In many of the designs I'm working with, I need precise control with regards to the space between the end of a paragraph and the image that follows.

When I use the paragraph element, it automatically inserts space after the actual text. This isn't padding as padding has been set to zero. Right now, this has been my solution (I'm only on day 2 with RED, so maybe I'm overlooking something):

Insert a 24px space between a paragraph and an image (below the paragraph).

Current solution
1. Insert the paragraph element and set the style requirements (font face, etc.).
2. Insert the image element that follows the paragraph element.
3. Select the paragraph element so I get the UI-based outline of the space it's taking up.
4. Take a screenshot and in Photoshop, measure the pixels being used that make up the default "space after" within the paragraph element (for this example, let's say it's 14px—this changes, though, depending on the typeface used, type size, etc.).
5. Subtract that value (14px) from the overall space required between the two elements (24px) and add add padding (10px) to make up the difference so I get the final spacing (24px) between the elements, as I require.

The problem with this is, every time a paragraph's text size is adjusted, this all needs to be recalculated.
Ideally, rather than forcing this "space after", it's be a lot more precise if there was zero "space after" and the user was left to adjusting the padding themselves to add this space after the paragraph. Ideally, this would also be done with the slight amount of space that's also added to the top of the paragraph element too (as you sorted get the same issue there, just not as drastic).

My other solution has been to use text elements, instead of paragraph elements, but I realize, in doing this, Accessibility takes a hit (and you still get slight padding on the top/bottom of text elements, just not as bad).

User 2753780 Photo

Registered User
5 posts

Thanks Kristin. I have similar needs. Having precise control of the space after a paragraph is something I really need. In my case, I want to REMOVE that space between the paragraph and the element directly below it. Wondering how this can be accomplished...
User 379556 Photo

Registered User
737 posts

Blockquote doesn't seem to have this problem, but I haven't tested whether this perhaps introduces other problems. I'm using RED Personal.

User 2820850 Photo

Registered User
1 post

The easiest way I fixed it is to search for "1.35em" in the HTML which seems to be the bottom padding and change to whatever you want- 10px in my case.
User 2176928 Photo

Registered User
18 posts

would be handy if we could lose that space after/before - if you want to float say a text link next to a para or heading then doesn't line up as that doesn't have same spacing. Not end of the world as can put links inline but not ideal.
User 232214 Photo

823 posts

Hey everybody,

The reason RED adds that space is because various versions of Outlook will do it otherwise. This creates more consistency with what you see in RED and what is presented in Outlook. Using text elements is a good work around though it will slightly impact accessibility as mentioned by Kristin. Email coding is still an art with a delicate balance between display consistency and custom design.

I did read about a hack for this that we might want to test with and, if successful, can integrate in one of the next releases.
The future of web layout has arrived and it's called CSS Grid. CoffeeCup helps you to get ready with a free guide, the Grid Builder app plus cool demos & themes.
User 2176928 Photo

Registered User
18 posts

User 10077 Photo

Senior Advisor
976 posts

Bob Visser wrote:
The reason RED adds that space is because various versions of Outlook will do it otherwise. This creates more consistency with what you see in RED and what is presented in Outlook.

Leave it to Microsoft to screw things up... ;)

Want personal and specialized help with RLM, RSD or with converting your VSD (or other) site to RLM/RSD? Email me at cchelp@uscni.org or call 865-687-7698.

Have something to add? We’d love to hear it!
You must have an account to participate. Please Sign In Here, then join the conversation.