Css: Control Space Between Bullet and ≪Li≫

CSS: Control space between bullet and li

Put its content in a span which is relatively positioned, then you can control the space by the left property of the span.

li span {  position: relative;  left: -10px;}

<ul>  <li><span>item 1</span></li>  <li><span>item 2</span></li>  <li><span>item 3</span></li></ul>

Space between li and bullet

.order ul li {text-align:left} would do the change.

CSS - space between the bullet and the list without padding the list

Have you considered using a pseudo element?

This process can offer complete control over the bullets position and shape.

li {  list-style: none;  position: relative;}
li::before {  content: '•';  position: absolute;  left: -30px;}

<ul class="list">  <li>A</li>  <li>B</li>  <li>C</li></ul>

HTML CSS Multi-Level List Spacing Between Bullet and Text

Add display: table-row to ol > li in css. Like that:

ol > li {
    display: table-row;
    ...
}

Snippet:

div {
    margin: 5px 0 0 0;
    padding: 0px;
    font-size: 12px;
    color: #777777;
}

ul,
ol,
li {
    font-family: Arial, Helvetica, sans-serif !important;
    font-size: 8pt;
    color: #505050;
    line-height: 1.4;
    margin: 0 !important;
}

ol {
    list-style-type: none;
    counter-reset: item;
    margin: 0;
    padding: 0;
}

ol > li {
    display: table-row;
    counter-increment: item;
    padding-top: 1em;
    color: #282828;
    font-weight: bold;
}

ol > li:before {
    content: counters(item, ".") ". ";
    display: table-cell;
    padding-right: 1em;
}

li ol > li {
    margin: 0;
    padding-top: 0.6em;
    color: #505050;
    font-weight: normal;
}
li ol > li:before {
    content: counters(item, ".") " ";
    display: table-cell;
    padding-right: 1em;
}

li ol ol > li {
    margin: 0;
    padding-top: 0.6em;
    color: #505050;
    font-weight: normal;
}

li ol ol > li:before {
    content: counter(item, lower-roman) ". ";
    display: table-cell;
    padding-right: 1em;
}

.boxl {
    border-radius: 5px;
    border: 1px solid #d4d4d4;
    width: 735px;
    height: 300px;
    overflow-y: scroll;
    overflow-x: hidden;
    background-color: #fafafa;
}

<div class="boxl" style="padding: 0px 10px 0px 10px;">
    <ol>
        <li>
            Heading 1
            <ol>
                <li>
                    Heading 1.1
                    <ol>
                        <li>Roman i</li>
                        <li>Roman ii</li>
                        <li>Roman iii: This is an example of a really long text to see what happens with regards to a hanging indent when the text gets carried over to the next line.</li>
                    </ol>
                </li>
                <li>Heading 1.2</li>
                <li>Heading 1.3</li>
                <li>Heading 1.4</li>
                <li>Heading 1.5</li>
                <li>Heading 1.6</li>
                <li>Heading 1.7</li>
                <li>Heading 1.8</li>
                <li>Heading 1.9</li>
                <li>Heading 1.10</li>
            </ol>
        </li>
        <li>Heading 2</li>
    </ol>
</div>

How is it possible to modify the gap between a bullet and its list text?

The only way I've been able to achieve this [decreasing the native browser rendered spacing of the li] is by adding additional markup to your li and setting a negative margin.

As an example:

Markup:

<ul>
    <li>
        <span>This is the text</span>
    </li>
</ul>

CSS

li span { margin-left: -10px; }

This could add quite a bit of extra unnecessary markup for such a small requirement. You'd be better of using a background image on your li element which offers better position control without all the extra markup.

I cant change space between bullet points in css

Your menu and other items in your design are list items li as well, so with the rule you applied, those items will also receive a margin. You need to be more specific if you only want to have the bullet points in your text to have more margin. In your case, you could for instance want something like: I only want list items that are inside a tumblr post (.tumblr-post) to have a bigger margin. In CSS that would look like this:

.tumblr-post li {
  margin: 33px 0;
}

Don't forget to remove the margin from your own CSS. So, change

ul, ol, li { list-style-position:inside; margin: 33px 0; }

ul, ol {list-style-position:inside;}

EDIT: it seems you want this:

.tumblr-text li {
  margin: 33px 0;
}

Spacing between bullet list rows

Add top and bottom padding to the lis, like so:

ul li { padding: 5px 0px; }

And take out that crazy looking <p /> tag.

Demo: http://jsfiddle.net/aFED2/

Css: Control Space Between Bullet and ≪Li≫