how to set margin equal to another margin?-CodePudding

I have multiple inputs that is horizontally centered in a div. I did this by

.inputs {
    margin-left: auto;
    margin-right: auto;
}

How do I set the bottom margin of each input equal to the margin of the left/right?

CodePudding user response：

Remember this "you can't add top or bottom margin to inline element"

read more about the block and inline elements

also you cant make the top and the bottom margin auto

solution

either you can hard code all margins

.inputs {
      display:block;
      margin: 10px 10px 10px 10px;
}

or you can hardcode the margin separately

.inputs {
    display:block;
    margin-top: 10px;
    margin-right: 10px;
    margin-bottom: 10px;
    margin-left: 10px;
}

you can also use the CSS variable

.inputs {
    display:block;
    --input-margin: 10px;
    margin-top:  var(--input-margin);
    margin-right:  var(--input-margin);
    margin-bottom:  var(--input-margin);
    margin-left:  var(--input-margin);
}

CodePudding user response：

you can't do it with native css but in js an idea can be to get the true value of margin-left by mixing
window.getComputedStyle and getPropertyValue

[...document.querySelectorAll('.test')].forEach(div => {
  div.style.marginBottom = window.getComputedStyle(div, null).getPropertyValue("margin-left");
});

.test {
  width: 80%;
  border: solid 1px;
  text-align:center;
  margin-left: auto;
  margin-right: auto;
}

<div >hello</div>
<div >hello</div>
<div >hello</div>