how to set margin equal to another margin?

user_18211544 0
Viewed 64

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?

css
1 Answers

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);
}
user_168709610
Related