Am I misunderstanding how padding works with inline-block elements and ul elements?

Question

I'm a rookie with HTML/CSS/JavaScript and new to StackOverflow. I attempted to make a nav pane at the top of the page with three centred list items in an unordered list. I wanted to set the padding evenly inside of the container to spread them out evenly. After fighting it, I figured out that there seems to be some sort of hidden space in between the padding of the ul and the li element. The padding percentages for the elements do not add up to 100 percent, they add up to 80. If i set the outside percentages of the ul to 20% making a total of 100%, one of my li elements drops down below the navpane and out of line with the others.

The space is NOT in between each list item it seems to be happening before the first li item and after the last li item. I have attempted to remove the white space but the issue is still there. Thank you.

HTML:

   <!DOCTYPE HTML>
     <html id="page">
     <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <link rel="stylesheet" href="stylesheet.css">
        <script src="script.js"></script>
        <script src="jquery.js"></script>
     </head>
     <body>
        <img id="backgroundimg" onload="fadeIn(backgroundimg)" src="C:\Users\Jessica and Larry\Desktop\Projects\Test Template 1\img\background1.jpg">
        <div id="navpane">
            <ul id="options">
                <li><button id="shirtdrop"><a>Shirts</a></button></li><li><button id="shoedrop"><a>Pants</a></button></li><li><button id="pantsdrop"><a>Shoes</a></button></li>
            </ul>
        </div>
        <div id="photochanger">
                <img>
        </div>
      </body>
      </html>

CSS:

header {
    width: 100%;
}

body {
    margin: 0;
    height: 100%;
}

#page {
    height: 100%;
    width: 100%;
    margin: 0;
    padding: 0;
}

#backgroundimg {
    display: none;
    opacity: 0.4;
    width: 100%;
    height: 100%;
    padding: 0;
    margin: 0;
}

#navpane {
    text-align: center;
    height: 60px;
    width: 100%;
    background: #d7dfed;
    position: absolute;
    opacity: 0.4;
    top: 0;
}

#options {
    list-style: none;
    max-width: 100%;
    margin: 0;
    padding: 0 10%;

}

#options li {
    display: inline-block;
    padding: 0 10%;
    margin: 0;
    text-align: none;
}

#options a {
    float: left;
    font-size: 30px;
    padding: 15px 0px;
}

#shirtdrop {
    background-color: inherit;
    outline: none;
    border: none;
    padding: 0;
}

#shoedrop {
    max-width: 140px;
    background-color: inherit;
    outline: none;
    border: none;
    padding: 0;
}

#pantsdrop {
    background-color: inherit;
    outline: none;
    border: none;
    padding: 0;
}

#photochanger {
    position: absolute;
    height: 20%;
    width: 70%;
    border: black;
    border-width: 1px;
    border-style: solid;
    bottom: 45%;
    left: 15%;
}

Yes, your understanding of padding is a bit out I think, but mostly you're not accounting for the width of the text. Of the three list items, only `#shoedrop` has any control of the text width, and even there you're using pixels, which isn't going to play nice with the padding in percentages. — Alohci, Jul 20 '18 at 23:53
I see that is probably causing the issue. I have to take into account the text width in the page and i failed to set it at all haha. I've been messing with this for a long time to not see that haha. Thank you! I'll play with it and see if i can get the percentages right now! — Larry Young, Jul 21 '18 at 00:01
Whoa just realized this may be a dupe of this question: https://stackoverflow.com/questions/51451611/why-is-there-a-space-in-between-the-ul-and-first-li-element I posted the same answer here nonetheless. — CodeCheshire, Jul 21 '18 at 00:17
Possible duplicate of [Why is there a space in between the ul and first li element?](https://stackoverflow.com/questions/51451611/why-is-there-a-space-in-between-the-ul-and-first-li-element) — CodeCheshire, Jul 23 '18 at 16:38

Erisan Olasheni · Answer 1 · 2018-07-21T00:10:29.473

0

You might not be able to get the 100% accuracy with padding because it works in relative to the width of the inner text of the li, which in this case varies.

SOLUTION A

Use the width property to set equal width to the li maybe 33.3333% in this case.

SOLUTION B

Align the li elements centered instead, and set the padding to look nice:

#options {
        list-style: none;
        max-width: 100%;
        margin: 0;
        padding: 0 10%;
        text-align: center;
    }

    #options li {
        display: inline-block;
        padding: 0 10%;
        margin: 0 auto;
        text-align: center;
        float:none;
    }

edited Jul 21 '18 at 00:10

answered Jul 20 '18 at 23:49

Erisan Olasheni

2,395
17
20

I tried to format it this way and it still shows the space. I thought it had something to do with the webkit-padding-start: 40px but a * css padding reset didn't fix it either :/ – Larry Young Jul 20 '18 at 23:56

Am I misunderstanding how padding works with inline-block elements and ul elements?

1 Answers1