Ul Has Margin on the Left

UL has margin on the left

The <ul> element has browser inherent padding & margin by default. In your case, Use

#footer ul {
    margin: 0; /* To remove default bottom margin */ 
    padding: 0; /* To remove default left padding */
}

or a CSS browser reset ( https://cssreset.com/ ) to deal with this.

Does UL have default margin or padding

The problem is that by default, browsers have custom css - in chrome for example:

ul, menu, dir {
   display: block;
   list-style-type: disc;
   -webkit-margin-before: 1em;
   -webkit-margin-after: 1em;
   -webkit-margin-start: 0px;
   -webkit-margin-end: 0px;
   -webkit-padding-start: 40px;
}

You'll have to use a custom rule for your ul:

element.style {
    margin-left: 0px;
    /* set to 0 if your not using a list-style-type */
    padding-left: 20px;
}

Why ul adds extra top margin?

The margin on the <ul> comes from the default styling that a browser adds to the element. For example if you open Chrome's DevTools and inspect the <ul> element you'll see styling like this. The user agent stylesheet refers to the browsers default styling. 1em of margin becomes 16px as the browser has a font-size: 16px by default.

As the default styling isn't the same between browsers a common technique is to use a reset stylesheet, like Eric Meyer's Reset CSS or Nicolas Gallagher's normalize.css, to reduce these browser inconsistencies.

There is margin of the ul to the div

What you're seeing is this:

It is a visual representation of the box model, Safari will show you this in the style inspector. I find Chrome a little clearer when displaying CSS information.

i want to change the margin-left of a ul element when i click on an image

This should work:

<ul id="myul">
...
</ul>

<img onclick="changeMargin()" src="button.png">

<script>
function changeMargin ()
{
    document.getElementById("myul").style.marginLeft="0px";
}
</script>

How to move all li elements to the left side of the ul element?

The padding on the ul pushes your li items over to the right. Since #email and nav are both indented 70px the only difference is the padding on the ul. Try adding:

ul {
    padding: 0;
}

HTML- CSS; add 5px to margin-left for every next nested ul li in hierarchy

Adding the following rules should give you the effect you are after:

/*Level 1*/
.tree > li > ul {
    margin: 0;
    padding: 0;
}
/*All other levels*/
.tree > li > ul ul {
    margin: 0 0 0 5px;
    padding: 0;
}

.tree > li > ul applies rules to ul that are direct descendants to li which are themselves direct descendants to .tree. .tree > li > ul ul gets all ul which are descendants of the first level ul.

Each ul in .tree that are children to another ul will get 5px left margin, because each ul is a child of another ul this margin will in effect be stacked.

.tree ul li ul {

    border-left: 1px solid #D9DADB;

    background-color: limegreen;

}

/*Level 1*/

.tree > li > ul {

    margin: 0;

    padding: 0;

}

/*All other levels*/

.tree > li > ul ul {

    margin: 0 0 0 5px;

    padding: 0;

}

<div>

    <ul class="tree">

        <li><a>System Administration</a></li>

        <li><a>System Core</a>

            <ul>

               <li><a>f2</a></li>

               <li><a>f3</a>

                  <ul>

                     <li><a>f4</a></li>

                     <li><a>f5</a></li>

                     <li><a>f6</a></li>

                  </ul>

               </li>

               <li><a>f7</a>

                   <ul>

                      <li><a>f8</a>            

                      <ul>

                         <li><a>f10</a>            

                         <ul>

                             <li><a>f11</a></li>

                         </ul>

                      </li>

                    </ul>

                </li>

                     <li><a>f9</a></li>

                 </ul>

             </li>

           </ul>

        </li>

        <li><a>MyFunctionA</a>

           <ul>

             <li><a>f12</a>

                <ul>

                   <li><a>f13</a></li>

                   <li><a>f14</a></li>

                </ul>

             </li>

              <li><a>f16</a></li>

            </ul>

          </li>

        <li><a>Course Management</a></li>

    </ul>

</div>

---

Related Topics