Jason Axelrod Jason Axelrod - 3 months ago 7
HTML Question

HTML inline-blocks are not straight?

I have 3 inline blocks in my html:

<div class="top">

<div class="inline color2 player1 polygon">
<div class="title">KDZaster</div>
</div>

<div class="inline color1 round polygon">
<div class="title">Grand Finals</div>
</div>

<div class="inline color2 player2 polygon">
<div class="title">DarthArma</div>
</div>

</div>


All 3 blocks are set
display: inline-block
, and they all have identical line-heights. However, the middle block has a smaller font size. Because of this smaller font size, the block itself seems to be set below the other blocks. I have included a jsfiddle:

https://jsfiddle.net/7jvtog6d/

Why is this happening? Is there an easy fix?

Answer

Vertically align the inline-block elements using vertical-align:top to your css and it will work fine!

Check this out and let me know your feedback. Thanks!

.top > div.polygon {
    display: inline-block;
    vertical-align: top;
}

:root {
  --main-color1: rgba(255, 000, 000, 0.5);
  --main-color2: rgba(000, 255, 255, 0.5);
  --main-color3: rgba(255, 255, 255, 0.5);
  --main-height: 40px;
  --main-gutter: -10px;
  --main-padding: 10px;
  --font-family: 'Franklin Gothic';
  --font-color: #FFFFFF;
  --font-large: 30px;
  --font-small: 14px;
  --font-shadow: 1px 1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, -1px -1px 0 #000;
  --arrow-width: 15px;
  --round-width: 150px;
  --player-width: 200px;
  --score-width: 40px;
  --out-speed: 0.5s;
  --in-speed: 5s;
}
body {
  color: var(--font-color);
  font-family: var(--font-family);
  font-size: var(--font-large);
  text-shadow: var(--font-shadow);
  line-height: var(--main-height);
  margin: 10px 0;
  text-align: center;
  background-color: black;
}
.slow {
  transition: all var(--in-speed) ease;
}
.fast {
  transition: all var(--out-speed) linear;
}
.inline {
  display: inline-block;
  margin: 0 -8px;
}
.color1 {
  background-color: var(--main-color1);
}
.color2 {
  background-color: var(--main-color2);
}
.color3 {
  background-color: var(--main-color3);
}
.round {
  font-size: var(--font-small);
  text-transform: uppercase;
  width: var(--round-width);
}
.round.polygon {
  -webkit-clip-path: polygon(0 calc(var(--main-height) / 2), var(--arrow-width) 0, calc(var(--round-width) - var(--arrow-width)) 0, var(--round-width) calc(var(--main-height) / 2), calc(var(--round-width) - var(--arrow-width)) var(--main-height), var(--arrow-width) var(--main-height));
}
.player1,
.player2 {
  width: var(--player-width);
}
.player1 .title {
  text-align: right;
  padding: 0 20px;
}
.player2 .title {
  text-align: left;
  padding: 0 20px;
}
.player1.polygon,
.player2.polygon {
  -webkit-clip-path: polygon(var(--arrow-width) calc(var(--main-height) / 2), 0 0, var(--player-width) 0, calc(var(--player-width) - var(--arrow-width)) calc(var(--main-height) / 2), var(--player-width) var(--main-height), 0 var(--main-height));
}
.top > div.polygon {
  display: inline-block;
  vertical-align: bottom;
}
<body>

  <div class="top">

    <div class="inline color2 player1 polygon">
      <div class="title">KDZaster</div>
    </div>

    <div class="inline color1 round polygon">
      <div class="title">Grand Finals</div>
    </div>

    <div class="inline color2 player2 polygon">
      <div class="title">DarthArma</div>
    </div>

  </div>

</body>