margin-top varies depending on the content

Question

I would like to have all the buttons have a margin-top to the buttoncontainer of 0 or some other value. But somehow it seems like this works or not depending on the content. The more the buttons content linebreaks vary the more the margin-top is different. How to make them all align?

.buttoncontainer {
  height: 100px;
  width: 400px;
  background-color: lightblue;
  display: inline-block;
}

button {
  margin-top: 0;
  height: 100%;
  width: 60px;
  display: inline-block;
}

<div class="buttoncontainer">
  <button></button>
  <button>test</button>
  <button>test test test </button>
</div>

doğukan · Answer 1 · 2020-07-09T23:08:34.107

This is not related to margin. If you set vertical-align: middle for the buttons, they will be properly aligned.

.buttoncontainer {
  height: 100px;
  width: 400px;
  background-color: lightblue;
  display: inline-block;
}

button {
  margin-top: 0;
  height: 100%;
  width: 60px;
  display: inline-block;
  vertical-align: middle;
}

<div class="buttoncontainer">
  <button></button>
  <button>test</button>
  <button>test test test </button>
</div>

Because inline-block elements has vertical-align: baseline as default. If you don't set it as middle, it will be aligned like this.

.buttoncontainer {
  height: 100px;
  width: 400px;
  background-color: lightblue;
  display: inline-block;
}

button {
  margin-top: 0;
  height: 100%;
  width: 60px;
  display: inline-block;
  /* vertical-align: baseline; this is default */
}

<div class="buttoncontainer">
  <button>a</button>
  <button>test</button>
  <button>test test test </button>
</div>

margin-top varies depending on the content

1 Answers1