Could you post the HTML you're using in that section to make your list in the editable section? Feel free to inbox me at dave@digitalpi.com if your more comfortable with that than posting it.
When you say 'line-break' - do you mean an actual <br> tag or the space after the list element or both?
One possible issue could be what @Joe Reitz mentioned above (<div>/<p>/none) -
Personally, I use the "none" option, so that Marketo isn't adding any additional HTML to my editable areas. I've found in testing thru Litmus that if you don't account for (and unless you do it inline, for some email clients, you can't account for) styling <div> and <p> elements in your code that these settings can skew your layout somewhat. This is because different email clients have different "default" standards (styles) for <p> and <div> elements and will render them "natively" unless you've declared them otherwise [inline, or in your <style> tag (which isn't read by some clients)]. This means the result is "erratic" line spacing depending on the client you are using to render the email code, b/c all of your editable elements are now wrapped in an additional <p> or <div> container (sometimes).
Another possibility has more to do with the "-webkit" attributes of list item displays.
Again, depending on the email client, lists will be rendered with a "-webkit-margin-* ".
For Chrome, the default settings for an ordered list (ex - the list above in this message) look like this in the inspector:
ol {
display: block;
list-style-type: decimal;
-webkit-margin-before: 1em;
-webkit-margin-after: 1em;
-webkit-margin-start: 0px;
-webkit-margin-end: 0px;
-webkit-padding-start: 40px;
}
That "-webkit-margin-before:1em;" and "-webkit-margin-after:1em;" are adding space before and after your list element. That's something that gets added in by the browser (Chrome), so it may have something to do with why you sometimes see it and sometimes don't. Outlook for example, is not a "webkit" browser (client) so this isn't an issue there (but padding is). Rather than try to balance all of that and to be sure, I add a style inline to my lists to override that default to 0px [reset] - so it'd look something like this:
The safest way to add vertical spacing to an email is with "line-height".
If you wanted to add some "padding" or a "margin" to the top / bottom of that list, i'd add a <div> or <td> (depending on your Framework) above & below the list that looked like this:
** NOTE: It's subtle, but Yahoo! does a better job of respecting an "!important" rule if there is no space between the "__px" and it. The spacer <div>s should also have "& nbsp ;" (w/ no spaces) in the middle of them to hold an "empty" space 20px tall [it renders a blank character in the code above rather than the non-breaking space] **
Hope this was helpful, please let me know if you've got any questions or if this helped to solve your issue?
Thank you Dave! I'll give these suggestions a try. Honestly, I've resorted to just making sure I use Shift+Return instead of just Return from within an email. Seems to help.
You got it Joey! I think the Shift + Return is a 'shortcut' to add the <br/> element (line break) into the middle of the code block (<p>, <div> ...) that you're typing in from the editor. Using just return will usually close the element you're working on and open a new element (<p><div>) for the next "line" of content. When there are add'l styles on those elements like padding or margins, that gets added along with the new element.
.png)