Why position:absolute adds 4px to the height of the outer container and how to remove it?

Question

I'm trying to make some kind of fluid header or whatever. The problem is that I noticed that when I add position:absolute to a elements, it adds 4 pixels to the header:

And if I remove position:absolute, then it doesn't add 4 additional pixels to the height:

Here's what I came up with so far:

<div class="content-container">
        <a href="#" class="header-logo"><img src="https://i.imgur.com/bn2vAjo.png" alt="" title=""></a>
        <nav class="main-menu">
            <ul>
                <li><a href="">Journal</a></li>
                <li><a href="">About</a></li>
                <li><a href="">About</a></li>
                <li><a href="">Contact</a></li>
            </ul>
        </nav>
</div>

.content-container {
    background: #292929;
    margin: 0 auto;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
}

.header-logo {
    align-self: center;
}

nav.main-menu {
    align-self: center;
}
nav.main-menu li {
    display:inline-block;
    width: 132px;
    height: 132px;
    font-weight:600;
    position: relative;
}

nav.main-menu li a {
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

* {
    border: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
}

https://jsfiddle.net/yafs3yoo/

I am obviously missing something here but I can't figure it out myself. I want this header to be exactly 132 pixels high (with borders), logo to be on the left side (centered vertically) and menu to be on the right side (centered vertically). How to get rid of these additional 4 pixels in the header?

There is no reason to make the `li` or links as `position:absolute`...I'm not sure what you are trying to achieve by doing that. — Paulie_D, Oct 23 '17 at 13:40
Further, `position: absolute` wouldn't add 4px. It just changes where things are positioned _relative to the nearest ancestor with position relative_ — random_user_name, Oct 23 '17 at 13:43
It's the old `inline-block` "extra space at the bottom issue" I suspect. — Paulie_D, Oct 23 '17 at 13:45
Since you are using flexbox...why not keep doing it? - https://jsfiddle.net/23zoLfwt/ — Paulie_D, Oct 23 '17 at 13:49
@Paulie_D Yes, thanks, it's not li but a elements that are absolute. But I still have no idea how to fix these 4 additional pixels. I'll continue looking for that "extra space at the bottom issue". — KulaGGin, Oct 23 '17 at 13:50
https://stackoverflow.com/questions/17905827/why-does-my-image-have-space-underneath — Paulie_D, Oct 23 '17 at 13:51
Ok, so I added vertical-align:bottom; for li elements and it fixed it. I still don't understand why it adds 4 additional pixels to the height of ul element(or paddings of ul element or margin of li element or I don't know) when li element has relative positioning and a element is positioned absolutely inside that element. Doesn't make any sense to me. Thanks a lot @Paulie_D. I'll use flexbox solution you provided instead of absolute positioning. — KulaGGin, Oct 23 '17 at 14:07

Johannes · Accepted Answer · 2017-10-23T14:05:39.950

1

As Paulie_D hinted in the comments, just add vertical-align: top; to the rule for nav.main-menu li

https://jsfiddle.net/3z0vefLL/1/

that's due to the default vertical alignment of inline-blocks along the baseline.

edited Oct 23 '17 at 14:05

answered Oct 23 '17 at 14:00

Johannes

64,305
18
73
130

It looks like it doesn't matter if you set vertical-align:top; or vertical-align: bottom;. In both cases there are no additional 4 pixels below the li elements, which doesn't make any sense to me. Default value is baseline, so when you change vertical-align from bottom to top, then it should add full text line to the height of the ul element, judging by the fact that it adds 4 pixels when you use baseline, right? Is there any article or something which would illustrate why it happens to inline-block elements? Is that a bug? – KulaGGin Oct 23 '17 at 14:15
There is some whitespace below inline and inline-block elements (by default also images) since they are aligned at the baseline, which means there is some reserved space below them for descenders of letters like j, g p etc. which extend below the baseline. (consider that inline elements often contain text) Aligning them to the bottom or top (instead of the default baseline-alignment) avoids this. – Johannes Oct 23 '17 at 14:26

Why position:absolute adds 4px to the height of the outer container and how to remove it?

1 Answers1