36 {{ upvoteCount | shortNum }}
36 {{ upvoteCount | shortNum }}

How can I increase space between bullets in HTML?

by Dayne Dylan Banned
16 replies
I've got a large list, all bulleted in a new website, and for the life of me...I can't figure out how to add a bit more space between them (white space). I'm sure this is simple.

Can someone chime in on what to do?

Thanks so much!
#bullets #html #increase #space
  • Profile picture of the author Derek S
    attach one or two <br> after each bullet in the code
    Signature

    --- Work Smart... Not Hard ---

    {{ DiscussionBoard.errors[887369].message }}
  • Profile picture of the author Karen Keyes
    Try just adding a new line code after each bullet:

    Code:
    <br />
    Signature
    {{ DiscussionBoard.errors[887370].message }}
  • Profile picture of the author GrantFreeman
    Horizontal space, or vertical space?

    Grant
    {{ DiscussionBoard.errors[887371].message }}
  • Profile picture of the author Dayne Dylan
    Banned
    I don't want a full break between the bullet points. That is too much space.

    Maybe about half a break space would be good.

    I have a large, vertical list Grant.
    {{ DiscussionBoard.errors[887385].message }}
  • Profile picture of the author Karen Keyes
    You can likely do this with CSS,

    .half {
    line-height: 0.5em;
    }

    Or try: line-height: 50%;

    Then in your html:

    <br class="half" />

    Not sure if this will work or not, haven't tried it before, but I think it will...
    Signature
    {{ DiscussionBoard.errors[887399].message }}
    • Profile picture of the author Derek S
      The CSS might work. If not, you will have to create a table and just set the cell padding to what ever you want.
      Signature

      --- Work Smart... Not Hard ---

      {{ DiscussionBoard.errors[887671].message }}
  • Profile picture of the author TelegramSam
    css is the way to go.

    google for it.
    {{ DiscussionBoard.errors[887701].message }}
  • Profile picture of the author Dayne Dylan
    Banned
    Thanks, got it licked.

    Thanks to all of you Warriors!
    {{ DiscussionBoard.errors[887721].message }}
  • Profile picture of the author RedMatrix
    What was your final solution Dayne?
    Signature

    ~Dave

    {{ DiscussionBoard.errors[888779].message }}
  • Profile picture of the author JeyKumara
    Banned
    [DELETED]
    {{ DiscussionBoard.errors[888813].message }}
    • Profile picture of the author Steven Fullman
      Originally Posted by RedMatrix View Post

      What was your final solution Dayne?
      Originally Posted by JeyKumara View Post

      Like to how did you resolve it at the end. thanks
      He used Karen's CSS code, almost certainly.

      I'm surprised more folks aren't into CSS. What with its ability to kick major web design ass, 'n all.

      Steve
      Signature

      Not promoting right now

      {{ DiscussionBoard.errors[888855].message }}
  • Profile picture of the author YellowDot Software
    The way I would do it so I didn't have to put the code in every single <li> tag is this:

    <ul class="paddedList">
    <!-- list elements here -->
    </ul>

    Then the css:

    .paddedList ul li {
    padding-bottom:5px;
    }

    That means you just put the class on the unordered list tag and it applies it to all the li tags of any ul with class "paddedList" That means if you want to change something you don't have to remember to add/change the code in every element
    {{ DiscussionBoard.errors[888885].message }}
    • Profile picture of the author Dayne Dylan
      Banned
      Yep, I used some simple CSS coding. Worked like a charm.

      Thanks everyone!
      {{ DiscussionBoard.errors[889060].message }}
      • Profile picture of the author RedMatrix
        Originally Posted by Dayne Dylan View Post

        Yep, I used some simple CSS coding. Worked like a charm.

        Thanks everyone!
        We want to see the actual code.
        Signature

        ~Dave

        {{ DiscussionBoard.errors[889903].message }}
    • Profile picture of the author Karen Keyes
      Originally Posted by YellowDot Software View Post

      The way I would do it so I didn't have to put the code in every single <li> tag is this:

      <ul class="paddedList">
      <!-- list elements here -->
      </ul>

      Then the css:

      .paddedList ul li {
      padding-bottom:5px;
      }

      That means you just put the class on the unordered list tag and it applies it to all the li tags of any ul with class "paddedList" That means if you want to change something you don't have to remember to add/change the code in every element
      Cool.. there's always more than one way to skin a cat That's a more efficient method above.

      Karen
      Signature
      {{ DiscussionBoard.errors[889236].message }}
  • Profile picture of the author Allen Graves
    You can also use inline css:

    <ul>
    <li style="margin-bottom: 6px;">item1 goes here</li>
    <li style="margin-bottom: 6px;">item2 goes here</li>
    <li style="margin-bottom: 6px;">item3 goes here</li>
    </ul>

    The css file solution is the best - but if you are only creating a single bulleted list on a webpage or article or blog or whatever, inline CSS will work fine too.

    I love CSS and I too don't see why more people don't use it.

    Allen
    Signature
    Every day I check the obituaries. If I don't see my name there, then I know it's going to be a good day!
    {{ DiscussionBoard.errors[889248].message }}
  • Profile picture of the author Valeriu Popescu
    For a simple paragraph, and sometime for headers, I use a line like this:

    <p style="margin-top: 10px; margin-bottom: 8px;">You text here...</p>

    Valeriu
    Signature

    >>> Partner In Profits => Learn How To Find JV Partners and Super-Affiliates From Scratch!
    >>> Local Internet Marketing Services => We offer: Local Maps Submission, Internet Marketing Consulting, SEO and SMM services.
    >>> Internet Marketing Profits Secrets Revealed => Help You Start A Profitable Home Based Business On A Shoestring Budget.

    {{ DiscussionBoard.errors[889699].message }}

Trending Topics