CSS strange div shift

Question

Hello I'm trying to develop a status bar for i3wm using electron.
Electronjs is using chromium render engine so my webpage should render as in Chrome.
I want to design UI but i came across strange behavior when one div is placed properly the second one is shifted verticaly.

Why it do this and how to fix it?

Here is my code:

HTML:

<div class="module slide slide-right">
    <div class="hover-icon">
        <i class="material-icons">power_settings_new</i>
    </div>
    <div class="slider">
        <a href="" class="action">
            <i class="material-icons">settings_backup_restore</i>
            <span class="action-label"> Restart</span>
        </a>
        <a href="" class="action">
            <i class="material-icons">power_settings_new</i>
            <span class="action-label"> Wyłącz</span>
        </a>
    </div>
</div>

CSS:

* {
  user-select: none;
  box-sizing: border-box;
}

body {
  color: #ccc;
  font-family: 'Open Sans', sans-serif;
  font-size: 15px;
  font-weight: 300;
  overflow: hidden;
  padding: 0;
  margin: 0;
  background-color: #181818;
}

p {
  margin: 0;
}

a {
  text-decoration: none;
  color: #ccc;
}

a:hover {
  color: #fff;
}


.module {
  height: 50px;
  position: absolute;
  display: inline-block;
  box-sizing: border-box;
  background-color: green;
}

.slide .hover-icon {
  display: inline-block;
  padding: 13px;
  height: 50px;
  width: 50px;
  background-color: blue;
}

.slide .slider {
  display: inline-block;
  height: 50px;
  background-color: red;
}

https://codepen.io/bulion121/pen/vbBaJM

Add `vertical-align: top;` on your `display: inline-block;` elements. — Arkellys, Jan 21 '19 at 14:35
Thank you, vertical-align has done the trick, I got rid of paddings and now it works — , Jan 21 '19 at 14:48

score 1 · Accepted Answer · answered Jan 21 '19 at 14:36

There are two issues here:

1) The browser interprets and sequence of whitespace as a single space character. That is, when the browser sees this:

<div>
  a
</div>
<div>
  b
</div>

...it's going to insert a ' ' between those two divs. There are several ways to fix this, including setting font-size: 0 on the parent container, using a float, using a flexBox, and writing your HTML like this:

<div>
  a
</div><div>
  b
</div>

Personally, I'd go with a flexbox.

2) Because #hover-icon and #slider are inline-blocks, they are affected by vertical-align. On the parent div, set vertical-align: top.

Thanks for your answer point 2 was the case – Jan 21 '19 at 14:50 — , Jan 21 '19 at 14:50

CSS strange div shift

1 Answers1