Menu
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?
405
Originally Answered: How do I make a button bigger in HTML? Put it inside of a div, set the div width/height to how big you want the button, then set button to 100% W, and 100% H, and 0 out margin, and padding on the button, and 0 padding on the div, but keep whatever margins you want.
To change the font size of a button, use the font-size property.
Fixing the width for buttons will give a coherent aspect to the interface. Yet, it has the risk of not being able to handle further buttons with perhaps longer labels. This reason makes it incompatible with a fixed guideline. You can always emphasise one particular button by playing on size, colour and padding.
You want a button to function as a hyperlink. To give you full styling control over the button, you could make the button an image file and put the image file inside your hyperlink. Alternatively, you could use a front-end library like Bootstrap.
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:
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.
64
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
