Geek asks and answers

The gasket inside the button element is not removed

On my button tag (note: not entered), I put an "X". He looks all right. However, when I add a border, I understand that the character is not really focused. It seems that there is some kind of button inside .

Is this something that can be removed? If so, how?

I tried to add styles (regular addition, margin, align and valign), but this did not bring me anything useful.

The problem looks like this jsFiddle .

<button style='width:18px;height:18px;'>X</button>
+3
source share
2 answers

In the violin, the button is not high enough for the text. But this is easy to install by adding line-height:0in CSS.

Updated script .

, "X" . , , "x" "×" .. .

, , , . . , , .

+4

:

, , 1 , font-size. <span> , . ( <span>, , <p> <div> .)

( : " ?".)

HTML:

<button><span class="text">X</span></button>

CSS

button {
    display: block;
    padding: 0px;
    margin: 0;
    width: 19px;
    height: 19px;
    border: 1px solid #000;
    border-radius: 5px;
}

button span.text {
    font-size: 11px;
    padding: 2px;
}

JSFiddle.

+1

More articles:


All Articles