Problem description:个 尽管按钮元素的上边距相等，但它们之间存在垂直偏移.
如果边距-顶部:属性更改，则整行按钮都会移动，而不是移动一个元素.
I have tried:个
- 不同的显示属性(
display: inline;&；display: inline-block;) -
position: relative;个
The next solution I would think of:个
将属性position:absolute;分配给按钮，然后分别 for each 元素定义页边距.
但这不是一个优雅的解决方案(如果你有 idea ，我会寻找一个).
Picture with the described problem:个
.VPcalc {
width: 550px;
height: 50px;
border: 2px solid blue;
margin-top: -5px;
background-color: lightgrey;
}
div input {
width: 50px;
border: 2px solid grey;
}
button#btnR1 {
display: inline-block;
background-color: darkblue;
opacity: 0.5;
border-radius: 5px;
border: 2px solid black;
width: 100px;
height: 20px;
margin-top: 15px;
margin-left: 15px;
}
button#btnR2 {
display: inline-block;
background-color: darkred;
opacity: 0.5;
border-radius: 5px;
border: 2px solid black;
width: 100px;
height: 20px;
margin-top: 15px;
margin-left: 15px;
}
button#btnR1:hover,
button#btnR2:hover {
background-color: white;
color: black;
}
div input#tag {
display: inline-block;
background-color: white;
opacity: 0.5;
border-radius: 5px;
border: 2px solid black;
width: 100px;
height: 20px;
margin-top: 15px;
margin-left: 15px;
}
div button#factor,
div button#calculation {
display: inline-block;
background-color: white;
opacity: 0.5;
border-radius: 5px;
border: 2px solid black;
width: 50px;
height: 20px;
margin-top: 15px;
margin-left: 15px;
}
span#f1,
span#t1 {
font-size: 12px;
}<div class="VPcalc">
<button id="btnR1" onClick="myFunction()">Neue Zahl</button>
<button id="btnR2" onClick="auswerten()">Auswerten</button>
<button id="factor"><span id="f1"></span></button>
<button id="calculation"><span id="t1" ></span></button>
<input type="number" id="tag"></input>
</div>