Html - Vertical offset for buttons in horizontal row

DorianFeyerer
October 9, 2023
202 views
0 votes
2 Answers

Problem description:
Despite equal top-margins of the button elements, there is a vertical offset between them.

If the margin-top: attribute is changed, the whole row of buttons moves, instead of one element.

I have tried:

different display-attributes (display: inline; & display: inline-block;)
position: relative;

The next solution I would think of:

Assign the attribute position:absolute; to the buttons and then define the margins separately for each element.
But that would not be an elegant solution (i would look for one, if you got ideas).

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>

Answers

It’s much easier to use Flexbox for this:

.VPcalc {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  width: 550px;
  height: 50px;
  border: 2px solid blue;
  margin-top: -5px;
  background-color: lightgrey;
}

div input {
  width: 50px;
  border: 2px solid grey;
}

button#btnR1{
  
  background-color: darkblue;
  opacity: 0.5;
  border-radius: 5px;
  border: 2px solid black;
  width: 100px;
  height: 20px;
}

button#btnR2{
  background-color: darkred;
  opacity: 0.5;
  border-radius: 5px;
  border: 2px solid black;
  width: 100px;
  height: 20px;
}

button#btnR1:hover, button#btnR2:hover{
  background-color: white;
  color: black;
}

div input#tag{
  background-color: white;
  opacity: 0.5;
  border-radius: 5px;
  border: 2px solid black;
  width: 100px;
  height: 20px;
}

div button#factor, div button#calculation{
  background-color: white;
  opacity: 0.5;
  border-radius: 5px;
  border: 2px solid black;
  width: 50px;
  height: 20px;
}

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>

There are options for spacing out those buttons. I’ve just centered them with a gap, but you might prefer something like justify-content: space-between etc. instead of the gap.

You generally don’t want to position things with margin. The modern approach is with flexbox.

Also, write CSS for classes, not IDs, so it’s reusable, and simplify by targeting like elements within a container. Use class names that describe the feature they add to the element.

.VPcalc {
  width: 550px;
  height: 50px;
  border: 2px solid blue;
  margin-top: -5px;
  background-color: lightgrey;
  display: flex;
  justify-content: space-around;
  align-items: center;
  box-sizing: border-box;
}

.VPcalc input {
  width: 50px;
  border: 2px solid grey;
}

.VPcalc button,
.VPcalc input {
  display: inline-block;
  opacity: 0.5;
  border-radius: 5px;
  border: 2px solid black;
  width: 100px;
  height: 24px;
}

.VPcalc button {
  padding: 4px 0;
}

.btn-blue {
  background: darkblue;
}

.btn-red {
  background: darkred;
}

.btn-blue:hover,
.btn-red:hover {
  background-color: white;
  color: black;
}

.VPcalc input,
.VPcalc btn {
  background-color: white;
}

.VPcalc span {
  font-size: 12px;
}

<div class="VPcalc">
  <button id="btnR1" class="btn-blue" onClick="myFunction()">Neue Zahl</button>
  <button id="btnR2" class="btn-red" 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" />
</div>

Please signup or login to give your own answer.

Click here to cancel reply.

Html – Vertical offset for buttons in horizontal row

Answers