Why does the text in an inline block element force the text in a sibling inline block element to align?

Question

I have this weird situation where the text VanillaJs Cookbook is forcing the Booking Calendar text to horizontally align with the text cookbook. Is there any way to fix this? You can see the black gap that exists above Booking Calendar.

Answer 1

The child elements of your <nav> seem to be positioned "inline" (which can happen by css properties like display: inline, display: inline-block but also float: left, float: right (in a slightly different way).

But there could also be many more reasons for the result your screenshot shows. I am pretty sure that the <a> with booking calendar isn't aligned directly to the <span> with cookbook! in it. It only accidently looks as if it was.

For a first shot you could try to apply the following rule on the <nav>-element and/or the <ul> and their child <li> and their child <a>, just try and see how the elements alignment changes:

nav {
  vertical-align: top;
}

ul,
ul li,
ul li a {
  vertical-align-top:
}

Also check the padding of the <li> and its inner <a> by giving it a specifig padding-top, e.g. padding-top: 0px;

Please give some more info about the css that applies to the elements for further help.

Answer 2

This is happening because these elements automatically align to the bottom of their parent.

What I recommend if you're not wanting this behavior is to float both the "article" and the "ul" elements.

This will allow you to move these elements more freely.

However, you will then need to specify a width and height for the entire nav.

Here's an example: https://jsfiddle.net/sL1w49h1/

The styles:

nav {
  width: 100%;
  height: 150px;
}

article,
ul {
  float: left;
}

ul li {
  list-style-type: none;
}

.calendar {
  margin-top: 24px;
}