CSS - inline-blocks not directly side to side

Question

I created a list and a div, both are display:inline-block;

However the result looks like the attached picture. The position of the right element is 10px lower than on the left side. But why?

The code is:

#menu-social {
    width: 40%;
    padding-top: 4px;
    display: inline-block;
    overflow: hidden;
    margin: 0;
    padding: 0;
    font-size: 0;
}

.frlk-top-bar-right {
    width: 60%;
    text-align: right;
    display: inline-block;
    font-size: 0;
}

Does anybody knows it?

Thanks.

You need `vertical-align: top` if you want the tops to align. — KWeiss, Feb 11 '16 at 14:26
Post a complete code example in your question. Include your HTML please. — j08691, Feb 11 '16 at 14:26

score 1 · Accepted Answer · answered Feb 11 '16 at 14:26

1

Add vertical-align

vertical-align: top;

More info:

https://developer.mozilla.org/es/docs/Web/CSS/vertical-align

answered Feb 11 '16 at 14:26

Marcos Pérez Gude

20,206
4
34
65

CSS - inline-blocks not directly side to side

1 Answers1