2

Look at the image... and now could anyone tell me how to get rid of the top and bottom "tails" to the borderline (which are there because the line-height is set to 40px).

The source code is here:

<!DOCTYPE html >
<html>
    <head>
        <style>
            body {
                font-family: Arial;
                font-size: 14pt;
                line-height: 40px;margin-left: 100px;
            }
            
            li {
                list-style-type: none;
            }
    
            ul {
                border-left: 5px blue solid;
                padding-left: 20px;
            }
        </style>
    </head>
    <body>
    <ul>
        <li>Intoduction</li>
        <li>Background</li>
        <li>Methodology</li>
        <li>Implementation</li>
        <li>Results</li>
        <li>Conclusion</li>
        <li>Credits</li>
    </ul>
    </body>
</html>
Improve this question
6
  • Why are you just using a left border? Putting the other borders in would be a way of making it look better. Even putting a different background color on the area would make it clear where the box is, the the left border would make more sense.
    – Stephen Ostermiller ♦
    Commented Sep 6, 2022 at 17:12
  • What would you hope the top and bottom of the border would line up with? The actual top and bottom of the words? On the bottom would it need to leave space for letters that go below the baseline (like g or y)?
    – Stephen Ostermiller ♦
    Commented Sep 6, 2022 at 17:13
  • @Osterniller I'm trying to replicate this style of contents list: developers.google.com/search/blog/2019/08/core-updates
    – Richard
    Commented Sep 6, 2022 at 19:01
  • Theirs has tails too. i.sstatic.net/Aldjm.png They have significantly shorter lines of text with multiple lines per item.
    – Stephen Ostermiller ♦
    Commented Sep 6, 2022 at 19:05
  • That's the example image that I posted - it's not the list from the Google page. Theirs has a shorter line at the top, but still has spacing between the lines of text. If I reduce my line-height to about 30px it's not nearly as evident.
    – Richard
    Commented Sep 6, 2022 at 19:27

1 Answer 1

Reset to default
2

You must change 2 items. First, remove the 40px line-height in the body declaration.

Then, give the required padding to each element on the list (li), except the last one.

Here's the code (tested OK in Firefox):

<!DOCTYPE html >
<html>
    <head>
        <style>
            body {
                font-family: Arial;
                font-size: 14pt;
                margin-left: 100px;
            }
            
            li {
                list-style-type: none;
            }
            li.space {
                padding-bottom: 20px;
            }
            ul {
                border-left: 5px blue solid;
                padding-left: 20px;
            }
        </style>
    </head>
    <body>
    <ul>
        <li class="space">Introduction</li>
        <li class="space">Background</li>
        <li class="space">Methodology</li>
        <li class="space">Implementation</li>
        <li class="space">Results</li>
        <li class="space">Conclusion</li>
        <li>Credits</li>
    </ul>
    </body>
</html>
Improve this answer
2
  • That's magic! I changed things around a bit and put an example of the changes here: codepen.io/rgraph/pen/LYmWZpE Cheers!
    – Richard
    Commented Sep 16, 2022 at 15:56
  • I just of another way - set the padding-top of li tags to 20px and then set the padding-top of li:nth-child(1) to zero. Kinda like this way but in reverse.
    – Richard
    Commented Nov 9, 2022 at 22:11

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.