<pre id="output"></pre>
<div id="root"></div>

body {
  font-family: "Segoe UI", Arial, Helvetica, sans-serif;
}

const displayVariants = [
  "block",
  "inline",
  "inline-block",
  "flex",
  "inline-flex",
  "grid",
  "inline-grid",
  "flow-root",
  "table",
  "contents",
  "none"
];

const properties = ["margin", "padding", ""];
const sides = ["top", "right", "bottom", "left"];
const values = ["5%", "5em", "5rem", "5vw"];

const output = document.getElementById("output");
const root = document.getElementById("root");

const makeProperty = (...args) => args.filter((arg) => !!arg).join("-");

const result = {};
for (const displayVariant of displayVariants) {
  const element = document.createElement("div");
  element.style.setProperty("display", displayVariant);
  for (const property of properties) {
    for (let index = 0; index < 4; index++) {
      const side = sides[index];
      const value = values[index];
      element.style.setProperty(makeProperty(property, side), value);
    }
  }
  element.textContent = displayVariant;

  root.append(element);
  result[displayVariant] ??= {};

  const styles = window.getComputedStyle(element);
  console.group(displayVariant);
  for (const property of properties) {
    for (let index = 0; index < 4; index++) {
      const side = sides[index];
      const propertyName = makeProperty(property, side);
      const value = styles.getPropertyValue(propertyName);
      result[displayVariant][propertyName] = value;
      console.log(propertyName, value);
    }
  }
  console.groupEnd();

  element.remove();
}

output.textContent = JSON.stringify(result, null, 2);