0

Code:

<!DOCTYPE html>
<html>
<head>
  <title>Foo</title>
  <style>
  button {
    min-height: 32px;
  }
  </style>
</head>
<body>
  <button>Hit Me</button>
</body>
</html>

In Chrome 72, Developer Tools show that the button has a height of 18px only. Why?

New Code:

<!DOCTYPE html>
<html>
<head>
  <title>Foo</title>
  <style>
  button {
    min-height: 32px;
    background: lightgray;
  }
  </style>
</head>
<body>
  <button>Hit Me</button>
</body>
</html>

Now the button height becomes 32px.

Why is the button height not honoring min-height without a background set?

Lone Learner
  • 18,088
  • 20
  • 102
  • 200
  • https://stackoverflow.com/q/26983505/483779 – Stickers Feb 22 '19 at 03:26
  • @Stickers I did see that link before and the answer there is not helping. The answer there mentions, "Altering one of these overwritten attributes results in disabling all of the other vendor styles on that element as well." But if you see my question, I am altering the button style in *both* cases. In fact, I am explicitly setting `min-height` in both cases and yet it is honored in only one case. – Lone Learner Feb 22 '19 at 03:31
  • Apparently `min-height` isn't one of those magic properties. I couldn't find any authoritative reference, otherwise I'd put up with an answer. – Stickers Feb 22 '19 at 03:35
  • I hope someone does, otherwise start a bounty, I think lots of people are curious too. – Stickers Feb 22 '19 at 03:37
  • I tried on [jsFiddle](https://jsfiddle.net/vjeu8sxf/3/), but it shows 32px in both cases. What's the screen size you are working upon? – Pushkar Adhikari Feb 22 '19 at 05:53

1 Answers1

0

Browser issue

First of all, I've made a Fiddle right here where you can try with different things/browsers.

button {
    height: 32px;
    min-height: 32px;
  }

This seems to work.

Is it only you?

No, as remarked here by @Michael_B, it seems to be a "browser thing", not only with min-height but with height and more.

So first you have the W3C standards, which are a set of guidelines for browser makers. And then you have the browser makers, who are free to do whatever they want.

If you also try with a Safari browser it stays with the 18px, but not with Firefox.

I don't exactly know why it works for example setting a background and neither could find it, but in my opinion, with height: 32px; //same as min-height is a "cleaner way" of getting through this.

<!DOCTYPE html>
<html>
<head>
  <title>Foo</title>
  <style>
  button {
    height: 32px; /*Here you should put the min-height value*/
    min-height: 32px;
  }
  </style>
</head>
<body>
  <button>Hit Me</button>
</body>
</html>

UPDATE 1

If you want to the button to have dynamic height (let's say 100%) to its parent, just do:

 div {
    height: 10px;
    min-height: 32px;
  }
  button {
    height: 100%;
  }

If you see, as the button is height: 100%; to the div (its parent), setting min-height to it will work perfectly and your button could dinamically change its height.

You could also go for:

button {
  min-height: 32px;
  border: 0;
}

Otherwise please tell your specific case for what you want to achieve.

Hope it helped.

luismiguelss
  • 155
  • 2
  • 16