CSS Control space between bullet and li

Question

I d like to control how much horizontal space a bullet pushes its  lt li gt  to the right in an  lt ol gt  or  lt ul gt    That is  instead of always having     Some list text goes    here    I d like to be able to change that to be            Some list text goes           here    or   Some list text goes  here    I looked around but could only find instructions for shifting the entire block left or right  for example  http   www alistapart com articles taminglists

User · Answer

An unordered list starts with the ul tag. Each list item starts with the The list items will be marked with bullets (small black circles) by default:

    <!DOCTYPE html>
    <html>
       <body>
          <h2>Normal List </h2>
          <ul>
             <li>Coffee</li>
             <li>Tea</li>
             <li>Milk</li>
          </ul>
       </body>
    </html>

Output:

<!DOCTYPE html>
<html>
<body>

<h2>Normal List </h2>

<ul>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>

</body>
</html>

The text-indent property specifies the indentation of the first line in a text-block.
Note: Negative values are allowed. The first line will be indented to the left if the value is negative.

<ul style='text-indent: -7px;'>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>

User · Answer

Old question but still relevant  I recommend using negative text-indent  list-style-position must be outside   Pros     Bullet is properly automatically positioned Change font size does not break the bullet position No extra elements   no   pseudo-elements too   Works for both RTL and LTR without change in CSS    Cons    try  to  find  one

User · Answer

You can just give a padding-left to your  lt li gt  element

User · Answer

The following solution works well when you want to move the text closer to the bullet and even if you have multiple lines of text   margin-right allows you to move the text closer to the bullet  text-indent ensures that multiple lines of text still line up correctly   x000D   x000D  li before   x000D    content      x000D    margin-right  -5px     Adjust this to move text closer to the bullet    x000D    x000D   x000D  li   x000D    text-indent  5px     Aligns second line of text    x000D    x000D   lt ul gt  x000D     lt li gt  Item 1      lt  li gt  x000D     lt li gt  Item 2     this item has tons and tons of text that causes a second line  Notice how even the second line is lined up with the first  lt  li gt  x000D     lt li gt  Item 3      lt  li gt  x000D   lt  ul gt  x000D   x000D   x000D

User · Answer

ul   list-style-position inside       Definition and Usage  The list-style-position property specifies if the list-item markers should appear inside or outside the content flow   Source  http   www w3schools com cssref pr list-style-position asp

User · Answer

You can use  ul li   padding-inline-start  15px

User · Answer

You can use ul li before and a background image  and assign position  relative and position absolute to the li and li before  respectively  This way you can create an image and position it wherever you want relative to the li

User · Answer

For list-style-type  inline   It s almost the same like DSMann8 s answer but less css code   You just need to    lt style gt      li before           content              padding-left  10px         lt  style gt    lt ul gt       lt li gt Some content lt  li gt   lt  ul gt    Cheers

User · Answer

Old question  but the  before pseudo element works well here    lt style gt      li before           content              display  inline-block          height  1rem      or px or em or whatever         width   5rem      or whatever space you want        lt  style gt    It works really well and doesn t require many extra rules or html    lt ul gt       lt li gt Some content lt  li gt       lt li gt Some other content lt  li gt   lt  ul gt    Cheers

User · Answer

There seems to be a much cleaner solution if you only want to reduce the spacing between the bullet point and the text   li before       content          margin-left  -0 5rem

User · Answer

You can use the padding-left attribute on the list items  not on the list itself

User · Answer

Using text-indent on li works best   text-indent  -x px  will move the bullet closer to li and vice-versa   Using relative on span the negative left might not work properly with older versions for IE  P S- avoid giving positions as much as you can

User · Answer

If your list-style is inside then you could remove the bullet and create your own     e g   in scss               li                   list-style  none                   amp  before                       content   -                                     And if you list style is outside then you could do something like this              li                    padding-left  10px                  list-style  none                   amp  before                       content           use any character you fancy                          position  absolute                      margin-left  -10px

User · Answer

Put its content in a span which is relatively positioned  then you can control the space by the left property of the span    x000D   x000D  li span   x000D    position  relative  x000D    left  -10px  x000D    x000D   lt ul gt  x000D     lt li gt  lt span gt item 1 lt  span gt  lt  li gt  x000D     lt li gt  lt span gt item 2 lt  span gt  lt  li gt  x000D     lt li gt  lt span gt item 3 lt  span gt  lt  li gt  x000D   lt  ul gt  x000D   x000D   x000D

User · Answer

You can also use a background image replacement as an alternative  giving you total control over vertical and horizontal positioning   See the answer to this Question

User · Answer

It seems you can  somewhat  control the spacing using padding on the  lt li gt  tag    lt style type  text css  gt      li   padding-left  10px     lt  style gt    The catch is that it doesn t seem to allow you to scrunch it way-snug like your final example   For that you could try turning off list-style-type and using  amp bull    lt ul style  list-style-type  none   gt       lt li gt  amp bull Some list text goes here  lt  li gt   lt  ul gt

User · Answer

Use padding-left 1em  text-indent -1em for the  lt li gt  tag  Then  list-style-position  inside for the  lt ul gt  tag    lt ul style  list-style-position  inside   gt     lt li style  padding-left  1em  text-indent  -1em   gt Item 1 lt  li gt   lt  ul gt

User · Answer

To summarise the other answers here     if you want finer control over the space between bullets and the text in a  lt li gt  list item  your options are    1  Use a background image    lt style type  text css  gt  li       list-style-type none      background-image url bullet png      lt  style gt    lt ul gt       lt li gt Some text lt  li gt   lt  ul gt    Advantages    You can use any image you want for the bullet You can use CSS background-position to position the image pretty much anywhere you want in relation to the text  using pixels  ems or     Disadvantages    Adds an extra  albeit small  image file to your page  increasing the page weight If a user increases the text size on their browser  the bullet will stay at the original size  It ll also likely get further out of position as the text size increases If you re developing a  responsive  layout using only percentages for widths  it could be difficult to get the bullet exactly where you want it over a range of screen widths   2  Use padding on the  lt li gt  tag   lt style type  text css  gt  ul  padding-left 1em  li  padding-left 1em   lt  style gt    lt ul gt       lt li gt Some text lt  li gt   lt  ul gt    Advantages    No image   1 less file to download By adjusting the padding on the  lt li gt   you can add as much extra horizontal space between the bullet and the text as you like If the user increases the text size  the spacing and bullet size should scale proportionally   Disadvantages    Can t move the bullet any closer to the text than the browser default Limited to shapes and sizes of CSS s built-in bullet types Bullet must be same colour as the text No control over vertical positioning of the bullet    3  Wrap the text in an extra  lt span gt  element   lt style type  text css  gt  li       padding-left 1em      color  f00     red bullet      li span       display block      margin-left -0 5em      color  000     black text       lt  style gt    lt ul gt       lt li gt  lt span gt Some text lt  span gt  lt  li gt   lt  ul gt    Advantages    No image   1 less file to download You get more control over the position of the bullet than with option  2      you can move it closer to the text  although despite my best efforts it seems you can t alter the vertical position by adding padding-top to the  lt span gt   Someone else may have a workaround for this  though     The bullet can be a different colour to the text If the user increases their text size  the bullet should scale in proportion  providing you set the padding  amp  margin in ems not px    Disadvantages    Requires an extra unsemantic element  this will probably lose you more friends on SO than it will in real life    but it s annoying for those who like their code to be as lean and efficient as possible  and it violates the separation of presentation and content that HTML   CSS is supposed to offer  No control over the size and shape of the bullet   Here s hoping for some new list-style features in CSS4  so we can create smarter bullets without resorting to images or exta mark-up

User · Answer

Here is another solution using css counter and pseudo elements  I find it more elegant as it doesn t require use of extra html markup nor css classes    ol  ul       list-style-position  inside     li       list-style-type  none     ol       counter-reset  ol    reset the counter for every new ol    ul li before           content    2022  00a0  00a0  00a0     bullet unicode followed by 3 non breakable spaces    ol li before           counter-increment  ol          content  counter ol     00a0  00a0  00a0     css counter followed by a dot and 3 non breakable spaces     I use non breakable spaces so that the spacing only affects the first line of my list elements  if the list element is more than one line long   You could use padding here instead

User · Answer

This should do it  Be sure to set your bullets to the outside  you can also use CSS pseudo elements if you can drop them in IE7 downward  I don t really recommend using pseudo elements for this kinda thing but it does work to control distance    x000D   x000D  ul   x000D    list-style  circle outside  x000D    width  100px  x000D    x000D   x000D  li   x000D    padding-left  40px  x000D    x000D   x000D   pseudo  x000D   pseudo ul   x000D    list-style  none  x000D    x000D   x000D   pseudo li   x000D    position  relative  x000D    x000D   x000D     use ISO 10646 for content http   la remifa so unicode named-entities html    x000D   pseudo li before   x000D    content    2192   x000D    position  absolute  x000D    left  0  x000D    x000D   lt ul gt  x000D     lt li gt Any Browser really lt  li gt  x000D     lt li gt List item x000D       lt ul gt  x000D         lt li gt List item lt  li gt  x000D         lt li gt List item lt  li gt  x000D       lt  ul gt  x000D     lt  li gt  x000D   lt  ul gt  x000D   x000D   lt ul class  pseudo  gt  x000D     lt li gt IE8  only lt  li gt  x000D     lt li gt List item x000D       lt ul gt  x000D         lt li gt List item with two lines of text for the example  lt  li gt  x000D         lt li gt List item lt  li gt  x000D       lt  ul gt  x000D     lt  li gt  x000D   lt  ul gt  x000D   x000D   x000D

[html] CSS: Control space between bullet and <li>

Examples related to html

Examples related to css

Examples related to html-lists