Went DOM branch after DOM branch but didn't find this mysterious margin

HTML & CSS
1

I evenly scattered a logo and a menu (with flex) and the logo touches the top line but the menu items has some 4-5 top margin that make them a bit lower than the logo and they aren’t in the same line? Generally you would remove this margin the hell out but I can’t track it even when going DOM branch after the other and also forcing the following code on the highest of these menu branches, and tried:

padding: 0 !important;
margin: 0 auto !important;
line-height: 0 !important...

I understand that Vertical-align won’t help since it’s not a table. I’ve no ideas left.

Here is a link to view it live: http://benia.biz/node/73

2

You’re probably getting it off this item

3

This does not appear in my Chrome console and my Firefox firebug seems to be buggy. Can you tell me how you found it and under what DOM branch? Thank you from all heart !

4

Is there a URL to the page that I missed?

5

I asked generally as I try to avoid pasting links to my own site: It is important for me to know if there is anything else besides padding, margin, line-height, and vertical-align that might effect this, anywhere, but in any case I added a link above.

6

Considering there’s no link to follow, all I could go was your image.

Basically, the idea is you draw an imaginary box around the WHOLE element itself, and that will tell you the space it takes up (or you can use the inspect option in Chrome and it’ll highlight the whole element when you click on the element in the code). Unless you’re putting individual letters in on at a time, the tallest ascender (the portion above the “standard” height) will set the top most border, and the lowest descender (the portion below the main text) will set the bottom most border.

7

OK, now that you posted a link. See how the box highlights when I selected the element? That sets your top border. And since the li items are block elements, they will all assume the same dimensions as the biggest extreme.

670×715 66.5 KB

8

Wow you’re fast… I came to add a note that I just added a link…

9

If I understand correctly, you want the top of the text to be exactly even with the top of the logo image. Normally text has some space above and below the letters. Therefore, you can add a negative margin to the top of the menu like this:

#header .menu {
    margin: -7px auto 0;
    padding: 0;
}

or a positive margin-top to the logo like this:

.site-logo img {
    display: block;
    margin-top: 7px;
    width: 250px;
}

to even them up.

It’s not a perfect solution because of the structure of the page, but it’s a good start. Normally, one should not expect the text and the image to remain perfectly aligned like that if the user sets a different font size than the coder.

I used Firefox and Firebug to find the boxes.

2 Likes
10

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.