svg as child of div causes unwanted shift

If I put an svg as a child of a div, it causes the div to have an unwanted shift, unless both divs have the svg. I cannot figure out from the dev tools where the extra space is coming from.

example:

    <div>
      <div class="box1">
        <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none">
          <line x1="20" y1="0" x2="0" y2="20" stroke="#D35A5A"></line>
        </svg>
      </div>
      <div class="box2">
      </div>
    </div>

.box1 {
  width: 20px;
  height: 20px;
  margin: 8px;
  border: 1px solid #FDFDFD60;
  display: inline-block;
  border-radius: 2px;
  outline: 2px solid transparent;
  outline-offset: 2px;
  background-color: #ffffff;
}

.box2 {
  width: 20px;
  height: 20px;
  margin: 8px;
  border: 1px solid #FDFDFD60;
  display: inline-block;
  border-radius: 2px;
  outline: 2px solid transparent;
  outline-offset: 2px;
  background-color: #333333;
}

<html>

  <body style="background:#000000;">
    <div>
      <div class="box1">
      </div>
      <div class="box2">
      </div>
    </div>
    <div>
      <div class="box1">
        <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none">
          <line x1="20" y1="0" x2="0" y2="20" stroke="#D35A5A"></line>
        </svg>
      </div>
      <div class="box2">
      </div>
    </div>
    <div>
      <div class="box1">
      </div>
      <div class="box2">
        <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none">
          <line x1="20" y1="0" x2="0" y2="20" stroke="#D35A5A"></line>
        </svg>
      </div>
    </div>
    <div>
      <div class="box1">
        <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none">
          <line x1="20" y1="0" x2="0" y2="20" stroke="#D35A5A"></line>
        </svg>
      </div>
      <div class="box2">
        <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none">
          <line x1="20" y1="0" x2="0" y2="20" stroke="#D35A5A"></line>
        </svg>
      </div>
    </div>
  </body>

</html>

Here's a jsfiddle: https://jsfiddle.net/c2nwqe1m/

Solution

Adding an inline element <svg> could cause baseline changes. Assigning .box1 and .box2 the same vertical-align could solve this issue:

.box1, .box2 {
  vertical-align: middle;
}

.box1, .box2 {
  vertical-align: middle;
}

.box1 {
  width: 20px;
  height: 20px;
  margin: 8px;
  border: 1px solid #FDFDFD60;
  display: inline-block;
  border-radius: 2px;
  outline: 2px solid transparent;
  outline-offset: 2px;
  background-color: #ffffff;
}

.box2 {
  width: 20px;
  height: 20px;
  margin: 8px;
  border: 1px solid #FDFDFD60;
  display: inline-block;
  border-radius: 2px;
  outline: 2px solid transparent;
  outline-offset: 2px;
  background-color: #333333;
}

<html>

  <body style="background:#000000;">
    <div>
      <div class="box1">
      </div>
      <div class="box2">
      </div>
    </div>
    <div>
      <div class="box1">
        <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none">
          <line x1="20" y1="0" x2="0" y2="20" stroke="#D35A5A"></line>
        </svg>
      </div>
      <div class="box2">
      </div>
    </div>
    <div>
      <div class="box1">
      </div>
      <div class="box2">
        <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none">
          <line x1="20" y1="0" x2="0" y2="20" stroke="#D35A5A"></line>
        </svg>
      </div>
    </div>
    <div>
      <div class="box1">
        <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none">
          <line x1="20" y1="0" x2="0" y2="20" stroke="#D35A5A"></line>
        </svg>
      </div>
      <div class="box2">
        <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none">
          <line x1="20" y1="0" x2="0" y2="20" stroke="#D35A5A"></line>
        </svg>
      </div>
    </div>
  </body>

</html>