8

I am using bootstrap 4 alpha.

<button class="btn btn-link p-0">
  <div style="display:inline-block; background-color:#c2f5ff; width: 100px; height: 100px;">
  </div>
 </button>

Fiddle

I nested a div inside a button. I set height and width on the div. My button width fits the div, but the height of the button is bigger than it needs to be. When you click on the button, the blue outline does not fit the content.

why is this behavior occurring?

Talha Awan
  • 4,573
  • 4
  • 25
  • 40
Wayn Chaw
  • 495
  • 2
  • 5
  • 11
  • 1
    Why do you need a div inside of a button? – Toastrackenigma Jul 31 '17 at 19:36
  • @Toastrackenigma perhaps i want to make an area which has multiple elements clickable – Wayn Chaw Jul 31 '17 at 21:08
  • You are doing that wrong then. **ANY** click on the button will activate scripts on the button parent (unless you properly handle the event), and it is not semantic - try making *more than one button to handle each click event*. If you want to trigger multiple things when clicking on one button, learn how events work in JavaScript – Toastrackenigma Jul 31 '17 at 22:32
  • Does this answer your question? [How to get rid of extra space below svg in div element](https://stackoverflow.com/questions/24626908/how-to-get-rid-of-extra-space-below-svg-in-div-element) – MMalke Apr 28 '21 at 17:37

4 Answers4

17

This is due to inline-block nature. Inner div of button is inline-block. Default value of vertical-align: baseline which creates extra gap. If you set for you div some value of vertical-align other than baseline (top, middle, bottom) button will have expected 102x102 size (width of content + 1px borders).

Explanation about vertical-align: baseline from this answer:

As browsers by default compute the vertical-align property to baseline, this is the default behaviour. The following image shows where the baseline is located on text:

Location of the baseline on text

Baseline aligned elements need to keep space for the descenders that extend below the baseline (like j, p, g etc) as you can see in the above image.

So just remove display: inline-block from your inner div to see expected result.

Vadim Ovchinnikov
  • 13,327
  • 5
  • 62
  • 90
0

You can remove display: inline-block on the div inside the btn and remove the border of the btn border: none (to remove the white padding inside the btn). So now the div inside is automatically display: block

Hope this help :)

Victor Allegret
  • 2,344
  • 3
  • 18
  • 31
0

Simply, the button is not 100px wide or high.

You need to set the size of the button, then make the div inside fill the button.

body {
    margin: 10px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/>

<button class="btn btn-link p-0" style="border-style:none;width:100px;height:100px;">
  <div style="background-color:#c2f5ff; width: 100%; height: 100%;">
  </div>
 </button>

We do this by setting width:100px and height:100px on the button itself, and then making the div inside fill the available width and height with width:100% and height:100%.

There is also a 1px-wide border around the button which you should remove with border-style:none

Toastrackenigma
  • 7,604
  • 4
  • 45
  • 55
0

I don't know why you would want a div inside a button, but this is what I did:

I set width and height to the button and set width and height of the nested div to 100%. That will make the nested div the same size as the button.

Here is jsfiddle.

flawy
  • 57
  • 8