Question 260615 in Html Question posted in
Some basic documentation can be found here.

How to get rid of gaps around my hyperlink menu in HTML

I’m making a website for a school project and I’m currently working on the homepage but I’m not sure how to get rid of the gap that around the edge of my hyper link menu.
picture of my current homepage
This the code I have for the hyperlink menu.

<style>
         nav {
            display: flex;
            justify-content: space-around;
            background-color: #cddc39;
            color: #333333;
            margin: 0;
         }
        nav ul {
            list-style-type: none;
            padding: 0;
         }
</style>

<nav>
    <ul>
        <li style="display:inline-block;"><a href="Anpost.html">An Post </a></li>
        <li style="display:inline-block;"><a href="Ryanair.html">Ryanair </a></li>
        <li style="display:inline-block;"><a href="Services.html">Services </a></li>
        <li style="display:inline-block;"><a href="Contact.html">Contact </a></li>
    </ul>
</nav>

I don’t have much experience using HTML so any help would be appreciated.

This the code I have for the hyperlink menu.

<style>
         nav {
            display: flex;
            justify-content: space-around;
            background-color: #cddc39;
            color: #333333;
            margin: 0;
         }
        nav ul {
            list-style-type: none;
            padding: 0;
         }

</style>

<nav>
    <ul>
        <li style="display:inline-block;"><a href="Anpost.html">An Post </a></li>
        <li style="display:inline-block;"><a href="Ryanair.html">Ryanair </a></li>
        <li style="display:inline-block;"><a href="Services.html">Services </a></li>
        <li style="display:inline-block;"><a href="Contact.html">Contact </a></li>
    </ul>
</nav>
Tags:

3

Answers


  1. 0

    Can you please post the proper requirement also, don’t understand from the above question ?

    Login or Signup to reply.
  2. 0

    Browsers have default CSS styles for many elements. This includes <ul>.

    What I did to investigate, was right click > inspect element on the list. My dev tools in my browser showed me these styles on the <ul> element:

    display: block;
list-style-type: disc;
margin-block-start: 1em;
margin-block-end: 1em;
padding-inline-start: 40px;

    So I tried setting margin:0 on the <ul> element and it worked. You were on the right track setting padding:0. Margin is another property that creates space in the box model. You can read an in-depth explanation about that here: https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/The_box_model

    So if you change the code for your nav ul selector to this:

    nav ul {
    list-style-type: none;
    padding: 0;
    margin:0;
}

    Then it should result in what you want.

    Login or Signup to reply.
  3. 0

    if you want to use space-around apply it to the ul element. If you want to remove the edge set margin on body to 0.

    nav ul {
            display: flex;
            justify-content: space-around;
            background-color: #cddc39;
            color: #333333;
            margin: 0;
         }
        nav ul {
            list-style-type: none;
            padding: 0;
         }
         
body{
background-color:lightblue;
margin:0;
}
    <body>
<nav>
    <ul>
        <li style="display:inline-block;"><a href="Anpost.html">An Post </a></li>
        <li style="display:inline-block;"><a href="Ryanair.html">Ryanair </a></li>
        <li style="display:inline-block;"><a href="Services.html">Services </a></li>
        <li style="display:inline-block;"><a href="Contact.html">Contact </a></li>
    </ul>
</nav>
</body>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search