CODEWITHSUNDEEP
csshtml
AkisC
AkisC

Reputation: 827

CSS Positioning of button with empty text

I have three simple html buttons styled with height - min-width - and border. One with text, second with non braking space, and last with empty text.

My nob problem is on browser view, the last button with empty text is printing in different place.

CSS:

.test {
    height: 27px;
    border: 1px solid #b4b1ff;
    min-width: 54px;
}

HTML:

<button class="test">Text</button>      <!-- with text -->
<button class="test">&nbsp;</button>    <!-- with Non Breaking Space -->
<button class="test"></button>          <!-- Empty ?? -->

see fiddle

Upvotes: 1

Views: 3560

Answers (1)

Paulie_D
Paulie_D

Reputation: 115288

Button elements are, I believe inline by default so you would need to vertically align them

JSFiddle Demo

CSS

body { margin: 0; padding: 0; }
.test {
    height: 27px;
    border: 1px solid #b4b1ff;
    vertical-align: top;
}

Upvotes: 5

Related Questions