Yacomini Yacomini - 2 months ago 7
HTML Question

How to prevent font falling out of button

I have a button for my page that I'm also styling it

<button id="logButton" >Iniciar sesión</button>


And then the css code

#logButton
{
width:119px;
margin-bottom: 5px;
padding-top: 3px;
margin-left:35%;
height: 25.5333px;
font-weight: bold;
font-size: 13px;
font-family: helvetica, arial, sans-serif;
}


Here's a fiddle also.

If I add the bootstrap class btn it doesn't do that and neither the font size nor the width of the button changes, my question is what does bootstrap do to keep text in place?

Answer

It's a natural behavior of an element, with fixed height and width, content will always overflow,it's better to use min-width and min-height.

#logButton
{
    min-width:119px;
    margin-bottom: 5px;
    padding-top: 3px;
    margin-left:35%;
    min-height: 25.5333px;
    font-weight: bold;
    font-size: 13px;
    font-family: helvetica, arial, sans-serif;

}
<button id="logButton" >Iniciar sesión Iniciar sesión</button>

and If you want to know about bootstrap's .btn here is css:

.btn {
    display: inline-block;
    padding: 6px 12px;
    margin-bottom: 0;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.42857143;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    -ms-touch-action: manipulation;
    touch-action: manipulation;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    background-image: none;
    border: 1px solid transparent;
    border-radius: 4px;
}
Comments