0

I have four buttons that are styled exactly the same. Two of them have a short text and two a longer one that needs to wrap. For some reason the buttons that have wrapping text are displayed slightly lower than the other ones. WHY??? (If I shorten the text - they get in line, so it is exactly the wrapping that's the cause).

enter image description here

The buttons are placed in a contaier div that has no direct styling applied to it and below some other div that is a flexbox container with some contents. This is a part of Vue app, but I doubt it has any significance. 

  <div> // no direct styling applied      
        <div class="some-flexbox-container"></div>

        <button class="pop-up-button report-button">CANCEL</button>
        <button class="pop-up-button report-button">APPLY</button>
        <button class="pop-up-button report-button">SAVE CHANGES</button>
        <button class="pop-up-button report-button">SAVE AS NEW REPORT</button>
  </div>

Styling applied to buttons:

.pop-up-button {
    margin: 15px;
    cursor: pointer;
    min-width: 80px;
}
.report-button {
    width: 7rem;
    height: 2.3rem;
    background-color: $gradient-dark-color;
    font-weight: 500;
    color: white;
    border-radius: 5px;
    border: none;
}

I know I could probably force them into obedience by putting them into a flexbox container or something, but I'd really love to know, what css insanity stands behind this absurd behaviour?

Eggon
  • 2,032
  • 2
  • 19
  • 38
  • vertical-align:top to the button – Temani Afif Apr 03 '20 at 22:08
  • They are following your text's baseline. Nothing insane about it, given they are inline-block element. – chriskirknielsen Apr 03 '20 at 22:10
  • Thank you this solved the problem. The baseline was my thought for a moment but I ruled it out as I expected the baseline to be middle of text, not middle of first line (!) of text (that is insanity to me still!). I see it only after you explicitly pointed it out. – Eggon Apr 03 '20 at 22:15

0 Answers0