CODEWITHSUNDEEP
csshtml
Frank N
Frank N

Reputation: 10396

Button has different baseline behaviour

I want to equalize the appearance of anchors, span and button within a certain context:

This starts of well, but as soon as a give an explicit width and height, <button> behaves differently than all other tags. Am I missing a css property to equalize?

(the vertical-align prop looked like a solution... as long as I had no explicit height...)

enter image description here

html

main>* {
  font-size: inherit;
  font-family: sans-serif;
  color: inherit;
  display: inline-block;
  box-sizing: border-box;
  text-align: left;
  text-decoration: none;
  border: none;
  background: rgba(blue, .1);
  padding: 0;
  margin: 0 .1em;
  width: 60px;
  height: 100px;
  overflow: hidden;
  vertical-align: bottom
}
<main>
  <button>button</button>
  <a href='#'>anchor</a>
  <a>plain</a>
  <button>button</button>
  <span>span</span>
  <button>button</button>
</main>

→ CodePen

Upvotes: 1

Views: 471

Answers (1)

Frank N
Frank N

Reputation: 10396

Temani's Pointer to this elaborate analysis was a good one.

Well, there's a solution then, it seems:

  • if I refrain from defining height, and put the desired height into line-height instead
  • and set vertical-align: middle (relevant for all tags except the button)
    overflow: hidden      
    width: 60px
    vertical-align: middle // button won't care, but everyone else
    line-height: 100px

I get, what I want (also the exact height btw, not plus some other base value)

enter image description here

Upvotes: 1

Related Questions