'Border and borderless div does not start at top baseline [duplicate]

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>
htmlcss


Solution 1:[1]

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>

Solution 2:[2]

One way:

.box {
    display: block;
    float: left;
}

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Nitheesh
Solution 2 Ned Hulton

Related Questions