css - html 要素の配置

Question

次のhtml要素があります。

<fieldset style="margin:20px;border:5px solid red;padding:0;">

        <label class="offset widget" >Title goes here</label>   
        <input class="offset widget" style="padding:0" type="text" name="fname">
        <div class="offset" style="position:relative;width:120px;display:inline-block;">
            <select class="widget" style="position: absolute; left:0;top:0;">
               <option value="en_KW">English</option>
               <option value="ar_KW">Arabic</option>            
             </select>
        </div>
</fieldset>

そしてcssスタイル：

            .offset{
            margin-left:40px;
            margin-right:0;
        }
        .widget{
            width:120px;
            height:16px;
            text-align:right;
            text-height:16px;
            font-size:11px;
            font-family:arial;
            border:2px solid black;
            float:left;
            padding:0;
        }

jsfiddle についても: http://jsfiddle.net/tPzqG/5/

1) div 表示をインラインに設定すると、マージンが考慮されないのはなぜですか? ラベルとテキストの入力要素もインライン要素であり、余白が考慮されます。(Firefox ではなく、Chrome で)

2)選択した高さがラベルとテキスト入力の高さよりも小さいのはなぜですか?高さは3つに指定されており、同じです。

3) テキストの配置は、ラベルでは機能しますが、選択では機能しません (クロムのみ)。direction:rtl なしでこれを修正することは可能ですか?

4)div表示がインラインブロックであるときにdivの高さが指定されていない場合、divがフィールドセットの下に移動するのはなぜですか?(jsfiddleのみ)