Как определить, являются ли элементы равноудаленными в CSS?

Question

я учусь CSS и чтобы практиковать свои навыки позиционирования, мне нужно выровнять сущность, созданную в CSS. В основном это android робот. Проблема в том, что я не уверен, что правильно выровнял некоторые элементы. Например, я хочу убедиться, что расстояние между левой стороной головы и левым глазом равно расстоянию между правой стороной головы и правым глазом. Как я могу убедиться?

Вот ссылка на код html и css.

https://codepen.io/crismanrique/pen/QWbZxdQ

h1 {
  text-align: center;
  font-family: 'Roboto', sans-serif;
}

.robots {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.head,
.left_arm,
.torso,
.right_arm,
.left_leg,
.right_leg {
  background-color: #5f93e8;
}

.head {
  width: 200px;
  margin: 0 auto;
  height: 150px;
  border-radius: 200px 200px 0 0;
  margin-bottom: 10px;
}

.eyes {
  display: flex;
  align-items: center;
}

.head:hover {
  width: 300px;
}

.upper_body {
  width: 300px;
  height: 150px;
  display: flex;
}

.left_arm,
.right_arm {
  width: 40px;
  height: 125px;
  border-radius: 100px;
}

.left_arm {
  margin-right: 10px;
}

.right_arm {
  margin-left: 10px;
}

.torso {
  width: 200px;
  height: 200px;
  border-radius: 0 0 50px 50px;
}

.lower_body {
  width: 200px;
  height: 200px;
  /* This is another useful property. Hmm what do you think it does?*/
  margin: 0 auto;
  display: flex;
  justify-content: center;
}

.left_leg,
.right_leg {
  width: 40px;
  height: 120px;
  border-radius: 0 0 100px 100px;
}

.left_leg {
  margin-right: 30px;
}

.left_leg:hover {
  -webkit-transform: rotate(20deg);
  -moz-transform: rotate(20deg);
  -o-transform: rotate(20deg);
  -ms-transform: rotate(20deg);
  transform: rotate(20deg);
}

.right_leg {
  margin-left: 30px;
}

.right_leg:hover {
  -webkit-transform: rotate(20deg);
  -moz-transform: rotate(20deg);
  -o-transform: rotate(20deg);
  -ms-transform: rotate(20deg);
  transform: rotate(340deg);
}

.left_eye,
.right_eye {
  width: 20px;
  height: 20px;
  border-radius: 15px;
  background-color: white;
}

.left_eye {
  /* These properties are new and you haven't encountered
	in this course. Check out CSS Tricks to see what it does! */
  position: relative;
  top: 100px;
  left: 40px;
}

.right_eye {
  position: relative;
  top: 100px;
  left: 120px;
}

<h1>Robot Friend</h1>
<div class="robots">
  <div class="android">
    <div class="head">
      <div class="eyes">
        <div class="left_eye"></div>
        <div class="right_eye"></div>
      </div>
    </div>
    <div class="upper_body">
      <div class="left_arm"></div>
      <div class="torso"></div>
      <div class="right_arm"></div>
    </div>
    <div class="lower_body">
      <div class="left_leg"></div>
      <div class="right_leg"></div>
    </div>
  </div>
</div>

Answer 1

Вы можете поместить границы или контуры (они не изменяют размер элементов) на каждый элемент, чтобы иметь визуальную помощь

* {
     outline: 1px solid red;
}

Вы также можете измерить расстояния, плагины линейки могут помочь GridRuler chrome расширение PageRuler chrome расширение

И, конечно же, вы можете использовать инструменты разработчика своего браузера для сравнения элементов

Ну и, по крайней мере, хорошо спланируйте, чтобы вам не приходилось измерять;)