How to make an html list with indents, bullets but no space between previous line?
I am often asked to make a specific text style that I cannot figure how to do.
All I want is to create an unordered list with regular bullets and regular indent. But that space that is built into lists between the first bulleted line and the previous line will not go away.
Here is what I DON’T want:
This is the last line in a paragraph
* This is the first bulleted line
* second bulleted line
* third bulleted line and so on
Here is a mockup of what I want:
This is the last line in a paragraph
* This is the first bulleted line
* second bulleted line
* third bulleted line and so on.
See how I do not want a space between the last paragraph and the first bullet?
I am using inline css for an email template.
Tagged with: bulleted line • bullets • indent • mockup • paragraph • text style
Filed under: Email List Building
Like this post? Subscribe to my RSS feed and get loads more!
Use CSS to change the margins and paddings of the < ul > and < li > tags.
You can start by setting them to 0, and then change them until you find the right values.
I’m using square brackets where you use HTML brackets.
[p style="margin-bottom:0px;padding:0px;"]This is the last paragraph[/p]
[!--0 is 0, but it's good practice to say 0px--]
[ul style="margin-top:0px;padding:0px;"]
[li style="margin:0px;padding:0px;"]List Item[/li]
[/ul]