How to add space before bullet points in HTML

Question

I want to add space before bullet points . My requirement like

This is paragraph1

The text line one

The text line two

This is paragraph 2

The text line one

The text line two

Any help will be appreciated.

[**`JSFiddle`**](http://jsfiddle.net/93eug/1/) setting the `ul` a `margin-left` — Darren, Jun 17 '14 at 05:37

score 1 · Answer 1 · answered Jun 17 '14 at 05:37

1

Try setting margin to li

li{
    margin-left: 20px;
}

JSfiddle here

answered Jun 17 '14 at 05:37

Nishan Hitang

855
3
10
36

score 0 · Answer 2 · answered Jun 17 '14 at 05:34

0

CSS:

li {
  margin-left:1em;
}

answered Jun 17 '14 at 05:34

Niels Keurentjes

41,402
9
98
136

1

It should be `li { padding-left: 1em; }`, as margin pushes everything to the right. Here: [**JSBin**](http://jsbin.com/mugayari/1/) – gtramontina Jun 17 '14 at 05:38

score 0 · Answer 3 · answered Jun 17 '14 at 05:36

You can set CSS to li as per your requirement.

HTML Code

<p>This is my paragraph1</p>
<ul><li> List One </li>
    <li> List Two </li>
    <li> List Three </li>
</ul>
<p>This is my paragraph 2</p>
<ul><li> List One </li>
    <li> List Two </li>
    <li> List Three </li>
</ul>

CSS

li {
  margin-left:1em;
}

JSFiddel

score 0 · Answer 4 · answered Jun 17 '14 at 05:49

0

apply margin-left to ul

Working Fiddle example is here:

Code:

    [http://jsfiddle.net/Sharan_thethy/MNaUn/][1]

I hope this will help you

answered Jun 17 '14 at 05:49

Sharanpreet

381
1
2
12

score 0 · Accepted Answer · answered Jun 17 '14 at 06:17

There is spacing before bullet points by default. If there isn’t, you are probably using a “Reset CSS” of some kind.

To set the spacing to a desired value, set padding-left and margin-left of both ul and li elements to zero and then set one of them to the desired value.

How to add space before bullet points in HTML

5 Answers5

Linked