Welcome!

By registering with us, you'll be able to discuss, share and private message with other members of our community.

SignUp Now!
  • Guest, before posting your code please take these rules into consideration:
    • It is required to use our BBCode feature to display your code. While within the editor click < / > or >_ and place your code within the BB Code prompt. This helps others with finding a solution by making it easier to read and easier to copy.
    • You can also use markdown to share your code. When using markdown your code will be automatically converted to BBCode. For help with markdown check out the markdown guide.
    • Don't share a wall of code. All we want is the problem area, the code related to your issue.


    To learn more about how to use our BBCode feature, please click here.

    Thank you, Code Forum.

HTML & CSS How to avoid the blank line before html lists?

MarkAurelius

MarkAurelius

Coder
Hi

If I do this:

Code: 
Here is my list
<ul>
 <li>Item the first</li>
 <li>Item the next</li>
</ul>

There is a blank line between "Here is my list" and "Item the first". What is the simplest way to position the list against the preceding code without a blank line?
 
Sort by date Sort by votes
Can you explain a little please what do you mean by blank line? Did you try this -
CSS: 
<style>
* {
    margin: 0;
    padding: 0;
}
</style>
Or just -
CSS: 
<style>
ul {
    margin-top: 0;
}
</style>
 
Last edited:
Upvote 0 Downvote
BGB said:
Can you explain a little please what do you mean by blank line? Did you try this -
CSS: 
<style>
* {
    margin: 0;
    padding: 0;
}
</style>
Or just -
CSS: 
<style>
ul {
    margin-top: 0;
}
</style>
Click to expand...

Thanks, I tried those but I didn't get the gap between the first item and the line above it disappearing.

My HTML is this:


HTML: 
<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>A test of lists</title>
</head>
<body>
Here is my list
<ul>
 <li>Item the first</li>
 <li>Item the next</li>
</ul>  
</body>
</html>

I tried applying your suggestions. One of them moved the items back against the margin, so I know they were being applied.
This is how it looks on Brave on Mac:

Screen Shot 2021-06-03 at 16.07.09.png

But using Pages I mocked up this:

Screen Shot 2021-06-03 at 16.07.35.png

No gap between the line "Here is my list" and the first item on the list.

I hope that explains it well. Please excuse the artefacts in my screenshots.
 
Upvote 0 Downvote
I don't understand you solved it or still need solution. So here -
HTML: 
<!DOCTYPE html>

<html lang="en">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>List Blank Line</title>
   
    <style>
        ul {
            margin-top: 0;
        }
    </style>
</head>

<body>
    Here is my list
    <ul>
        <li>Item the first</li>
        <li>Item the next</li>
    </ul>
</body>

</html>
 
Upvote 0 Downvote
BGB said:
I don't understand you solved it or still need solution. So here -
HTML: 
<!DOCTYPE html>

<html lang="en">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>List Blank Line</title>
  
    <style>
        ul {
            margin-top: 0;
        }
    </style>
</head>

<body>
    Here is my list
    <ul>
        <li>Item the first</li>
        <li>Item the next</li>
    </ul>
</body>

</html>
Click to expand...

Ah, thanks, that solved it! I was trying to put the style in the body and thin in the ul tag directly. But in the head it worked.
 
Upvote 0 Downvote

New Threads

Latest posts

Share this page

Buy us a coffee!

Code Academy Advertisement
DataCamp Advertisement

About Us

Code Forum is a community platform where coding enthusiasts can connect with other developers, engage in discussions, ask for help, and share their knowledge with a supportive community. It's a perfect place to improve your coding skills and to find a community of like-minded individuals who share your passion for coding.

Site links

Stay Connected

Back
Top Bottom