How to tell if elements are equidistant in CSS?

Question

im learning CSS and to practice my positioning skills, I need to align an entity created in CSS. Its basically the android robot. The problem is that Im not sure if I have perfectly aligned some of the elements. For example, I want to make sure that the distance between the left side of the head and the left eye are the same distance between the right side of the head and the right eye. How can I make sure?

Heres the link to the html and css code.

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;
}

Robot Friend

user_9015191 · Answer

You can put borders or outlines (they dont change the size of the elements) on each element so you have visual help

* {
     outline: 1px solid red;
}

You can also measure the distances, ruler plugins can help GridRuler chrome extension PageRuler chrome extension

And sure you can use the developer tools of your browser to compare the elements

Ah and at least, plan well so you do not have to measure ;)

How to tell if elements are equidistant in CSS?

1 Answers