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>
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. Sep 6 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)? Sep 6 at 17:13
  • @Osterniller I'm trying to replicate this style of contents list: developers.google.com/search/blog/2019/08/core-updates
    – Richard
    Sep 6 at 19:01
  • Theirs has tails too. i.stack.imgur.com/Aldjm.png They have significantly shorter lines of text with multiple lines per item. Sep 6 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
    Sep 6 at 19:27

1 Answer 1

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>
1

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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