Warum ändert sich der obere/untere Rand auf %, wenn die Bildschirmgröße horizontal geändert wird?

Warum ändert sich der obere/untere Rand auf %, wenn die Bildschirmgröße horizontal geändert wird?

Hier ist ein Beispiel für ein Layout mit Kästchen, und ich habe alle Ränder auf 1,45% gesetzt. Ich verstehe, warum sich die linken und rechten Ränder ändern, aber warum ändern sich die oberen und unteren Ränder, wenn ich die Bildschirmgröße HORIZONTAL ändere? Gibt es eine Möglichkeit, dies so zu implementieren, dass sie sich nur ändern, wenn die Bildschirmgröße VERTIKAL geändert wird?

https://jsfiddle.net/c60ymrfu/2/

.item {
  width:30%;
  margin-left:1.45%;
  margin-right:1.45%;
  margin-top: 1.45%;
  margin-bottom: 1.45%;
}