How to control space between bullet and text in a list

[ChoccieMuffin]

Hi all

I know there's a whizzy way to do this but after much trial-and-error, and much hunting in both Flare Help and these forums, and a fair bit of pulling my hair out, I've given up and thought I'd just come right out and ask.

HTML5 output.
Ordinary <ol> and <ul> selectors that contain ordinary <li> selectors.

Three questions:
1. In my output, the bullets and numbers are really close to the bullet content. How can I increase this space? I know it can be done but can't for the life of me work out how.

2. How can I make my numbers left-align, so that the 1 in 1, 12 and 103 align vertically, rather than the 1, 2 and 3, or the dot that follows them, aligning (as this shoves bigger numbers off to the left, which I think looks ugly.)

3. How do I control the positioning of the list itself? I've messed about with margin-left and padding-left on the <ol> and <ul> selectors (and even tried messing around with those values on the <li> selector) and have just succeeded in confusing the pants off myself.
If my <p> has a left margin of 20px, what do I have to change to get my numbers and bullets to line up with the left margin of <p>? When I look at stuff in the XML editor it is just about never what drops out of the bottom when I build an output, so some helpful guidelines from you clever people will be very gratefully received.

Right then, I'm off home, and hopefully there will be some helpful suggestions by the time I get in in the morning! Night all, and thanks in anticipation.

[Psider]

1. You should be able to use padding-left on the li to increase the space between the bullet/number and text.
2. Css/HTML defines the right alignment and as far as I know there's no built in way of changing this. I have read about setting the ol list-style to none and using counters to build your own numbering using ::before, but it seems pretty complicated unless you really need it, and my quick test ran into problems with spacing when I tried with numbering above 100. It might be possible to set up using Flare's autonumbering, but I have no experience with that.
3. The lists seem to be indented by about 20px in the few browsers I've looked at. So if you set the margin-left on the ol/ul to 20px plus the margin-left on your p) then the numbers should approximately align with your paragraph (give or take browser differences and padding). However, it might depend a little on what styling you have on *, body, html, etc. I'd suggest playing with a simple html file outside Flare just to get a feel for the basic adjustments (margin-left, padding-left, text-indent, etc).

[NorthEast]

(3) There's not actually a precise way to set the bullet/number position.

The margin-left on the ol/ul tag sets the distance from the left edge of the list (ol/ul) tag, and the list item (li).
However, when using default outside positioning, nothing in the CSS actually controls the bullet/number position - the browser just places it to the left of the list item, and it isn't restricted inside the ol/ul tag (so can go past the left edge if the margin is too small).

In my help, anything under 1em takes the bullet too far to the left (it extends past the left edge of the list ol/ul tag), but around 1.2em is aligned with the left edge of the list.
(I actually use 2em, as I don't want my bullets aligned.)

So maybe start off with setting the ol/ul with margin-left: 1.2em;
Then in your browser use F12 to inspect the styles, and tweak the 1.2em figure until it looks lined-up. (Using browser tools is also a great way to experiment on how each setting affects the list.)

If you need to increase spacing between the bullet and list item, use left-padding on the li (as psider mentions).

[ChoccieMuffin]

Thanks chaps, just about to get down and dirty with left margins and left padding. I'll be coming up for air in a couple of hours!