Clever Geek Handbook

The height of the button is greater than the height of the nested content

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 have nested a div inside a button. I was setting height and width on a div. My buttons width fits the div, but the button height is larger than it needs to be. When you click the button, the blue outline doesn't match the content.

why does this behavior occur?

+3


source to share


4 answers


It has to do with character inline-block

. Internal button div

- inline-block

. A default value vertical-align: baseline

that creates an extra space. If you have installed for you div

, then the value vertical-align

other than baseline

( top

, middle

, bottom

), would be expected 102x102

size (width Content + 1px

boundaries).

Explanation about vertical-align: baseline

from this answer :

How browsers evaluate the property vertical-align

on baseline

by default, this is the default behavior. The following illustration shows where the baseline is in the text:



Location of the baseline on text

Elements aligned to the baseline should contain space for descenders , which extend below the baseline (eg j

, p

, g

etc.), as you can see in the above image.

So just remove display: inline-block

from your internal div

to see the expected result.

+2


source


You can remove display: inline-block

on the div inside btn and remove the border of btn border: none

(to remove the white padding inside btn). So now the div is inside automaticallydisplay: block



Hope this help :)

0


source


It's just that the button isn't 100px

wide or tall.

You need to set the size of the button, then make a 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>
Run codeHide result


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

general border around the button, which you should remove withborder-style:none

0


source


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

I set width

both height

on the button and set width

both the height

nested div to 100%

. This will make the nested div the same size as the button.

Here is a jsfiddle .

0


source






More articles:


All Articles