Why the button with a fixed height can't align perfect with other buttons when there's something in it but not using up its height?

Question

There are 6 buttons, the second one has something inside. But I defined all the buttons a fixed height and the inside content is not using up the room at all. Why it's still not in the expected position?

Please take a look at this simple code:

button {height:60px;width:50px;border:1px solid #000;box-sizing:border-box}
button span {display:block;color:grey; font-size:9px}

<button>1</button>
<button>2<span>2.1</span></button>
<button>3</button>
<button>4</button>
<button>5</button>
<button>6</button>

s.kuznetsov · Answer 1 · 2020-11-01T08:07:36.593

0

This is due to the <br> tag, which indents downwards and therefore offsets your button. If you need to solve this problem, then I made such a solution for you, using position: absolute.

button {
  height:60px;
  width:50px;
  border:1px solid #000;
  box-sizing:border-box
}

button span {
  color:grey; 
  font-size:9px;

  position: absolute;
  transform: translate(-45%, 25%);
}

<button>1</button>
<button>2<br><span>2.1</span></button>
<button>3</button>
<button>4</button>
<button>5</button>
<button>6</button>

edited Nov 01 '20 at 08:07

answered Nov 01 '20 at 07:01

s.kuznetsov

14,870
3
10
25

Hi, though it solves, the problem still exists without
. So it's not about
, right? I've updated my question. – AGamePlayer Nov 01 '20 at 07:26
besides, your solution would make the content not in the center, vertically. – AGamePlayer Nov 01 '20 at 07:27
because you wrote `display:block` for `button span`. In fact, your problem can be solved with `flexbox`. – s.kuznetsov Nov 01 '20 at 07:36

connexo · Answer 2 · 2020-11-01T08:03:27.387

The reason is not the br tag (which you have already edited out), it's the fact that button by default (user agent styles) has display: inline-block, which means that your succession of buttons forms a textual line, it sits in line.

If you want to stick with that, you need to make sure all your buttons in that line align vertically, so use vertical-align:

button {
  height: 60px;
  width: 50px;
  border: 1px solid #000;
  box-sizing: border-box;
  vertical-align: middle;
}

button span {
  display: block;
  color: grey;
  font-size: 9px;
}

<button>1</button>
<button>2<span>2.1</span></button>
<button>3</button>
<button>4</button>
<button>5</button>
<button>6</button>

score -1 · Answer 3 · answered Nov 01 '20 at 07:02

-1

Because you are putting br tag inside the second button which means new line.

So change it to (remove br tag)

<button>2<span>2.1</span></button>

https://jsfiddle.net/z1tao30g

answered Nov 01 '20 at 07:02

Nefazodone

69
6

score -2 · Answer 4 · answered Nov 01 '20 at 06:54

-2

here you are:

html:

<button>1<br><span class="visnon">.</span></button>
<button>2<br><span>2.1</span></button>
<button>3<br><span class="visnon">.</span></button>
<button>4<br><span class="visnon">.</span></button>
<button>5<br><span class="visnon">.</span></button>
<button>6<br><span class="visnon">.</span></button>

css:

button {height:60px;width:50px;border:1px solid #000;box-sizing:border-box}
button span {color:grey; font-size:9px}
.visnon{visibility: hidden;}

answered Nov 01 '20 at 06:54

MohsenGhetmir

42
6

3

An explanation of _why_ this answers the question would make your answer a bit more useful. Otherwise, this isn't much more than a code-dump. – Tieson T. Nov 01 '20 at 06:57
sorry, i just added
. to all of them and then i maked them invisible to user dont see that "." , now all of them have one dot under the number and it is invisible – MohsenGhetmir Nov 01 '20 at 07:58

Why the button with a fixed height can't align perfect with other buttons when there's something in it but not using up its height?

4 Answers4