CODEWITHSUNDEEP
css
stevenvh
stevenvh

Reputation: 3139

Why are my text boxes different heights (CSS)?

My CSS code:

#nav { width:400px; text-align:center; }
#nav span { 
    display:block-inline;
    margin:0 2px;
    padding:2px 12px;
    height:21px;
    border:1px solid #999;
    border-radius:2px; 
    -moz-border-radius:2px; 
    -webkit-border-radius:2px; 
    text-align:center;
}

and the HTML: 

  <p id="nav">
    <span style="float:left;">previous</span>
    <span>back</span>
    <span>random</span>
    <span style="float:right;">next</span>
  </p>

This should give me 4 text boxes the same height, but what I get is this:

enter image description here

They're correctly top-aligned, but the "previous" and "next" boxes are higher than defined in the CSS. Any idea why that is? (I don't have any CSS specific to floats.)

Upvotes: 1

Views: 104

Answers (1)

Vangel Tzo
Vangel Tzo

Reputation: 9313

You should apply display: inline-block; instead of display: block-inline

An example: http://jsfiddle.net/c9br2/1/

Upvotes: 4

Related Questions