如何判断元素在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 extension PageRuler chrome extension

确保您可以使用浏览器的开发人员工具来比较元素

嗯，至少要计划好，这样就不必测量;）