Border and borderless div does not start at top baseline

Issue

How do I make the first and last div start at the top?

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.box {
  display: inline-block;
  width: 40px;
  height: 40px;
  border: 10px solid black;
  text-align: center;
  margin-right: 8px;
  text-decoration: none;
}
div.arrow {
  border: none;
  background-color: lightgray;
}

<div class="box arrow">←</div>
<div class="box">1</div>
<div class="box">2</div>
<div class="box">3</div>
<div class="box arrow">→</div>

Solution

Just use border: 10px solid lightgray; to the div.arrow.

Because the only dimensional difference between .box and div.arrow is their border value.

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

.box {
    display: inline-block;
    width: 40px;
    height: 40px;
    border: 10px solid black;
    text-align: center;
    margin-right: 8px;
    text-decoration: none;
}

div.arrow {
    border: 10px solid lightgray;
    background-color: lightgray;
}

<div class="box arrow">←</div>
<div class="box">1</div>
<div class="box">2</div>
<div class="box">3</div>
<div class="box arrow">→</div>

Answered By - Nitheesh