Eliminate the "space after" on the...
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):
Goal
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).
Thanks,
Kristin.
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):
Goal
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).
Thanks,
Kristin.
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...
Blockquote doesn't seem to have this problem, but I haven't tested whether this perhaps introduces other problems. I'm using RED Personal.
Frank
Frank
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.
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.
J
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 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.
J
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.
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...
ASK ME ANYTHING
I provide personalized help for Coffeecup Users including personal or group training for Site Designer, Web Form Builder and more via Zoom.
Email me at support@uscni.org or call 865-687-7698.
Did you know that Web Form Builder can be used for both simple and complicated forms and that it's not limited to the default fonts and buttons? Take a look at a form we developed for WindowTinting.com.
https://forms.windowtinting.com/forms/w … ppingcart/
I provide personalized help for Coffeecup Users including personal or group training for Site Designer, Web Form Builder and more via Zoom.
Email me at support@uscni.org or call 865-687-7698.
Did you know that Web Form Builder can be used for both simple and complicated forms and that it's not limited to the default fonts and buttons? Take a look at a form we developed for WindowTinting.com.
https://forms.windowtinting.com/forms/w … ppingcart/
Did this ever get solved/resolved/improved?
Within a paragraph element we have paragraphs with large carriage returns, done by manually adding a blank line, between them. We tried changing line height of the blank line and as soon as we edit the number even slightly the line height effectively goes to zero and the two paragraphs collapse. Bug? Expected?
We tried to break each paragraph into a separate element (not natural for our staff to write that way) and still can't adjust the gap after paragraphs. Margin control somewhere?
Hints please, anyone?
We're in 3.0 v1602
Within a paragraph element we have paragraphs with large carriage returns, done by manually adding a blank line, between them. We tried changing line height of the blank line and as soon as we edit the number even slightly the line height effectively goes to zero and the two paragraphs collapse. Bug? Expected?
We tried to break each paragraph into a separate element (not natural for our staff to write that way) and still can't adjust the gap after paragraphs. Margin control somewhere?
Hints please, anyone?
We're in 3.0 v1602
Back again. Been a while. Did that "hack" ever work/get implimented? Still not seeing a way to control the margin-bottom on a paragraph? Not possible?
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.