Input element not aligning "flush" to DIV container

I have been laying out a GUI uing ASP.NET and find I am confused by the rendering of the <asp:TextBox /> control. It seems as though some default margin is added to the left and right of the <input> control that is rendered by the ASP.NET TextBox. Below is an example of my code. The resultant <input> element does not align flush to the container <div>, even thought the text element above it ("Some Text") is aligned flush.

<div style="float:left;">
  <b>Some Text</b>
  <asp:TextBox ID="txtTextBox" runat="server" TextMode="MultiLine" Style="width:300px;height:300px;"  />
</div>

Quite by accident I found that if I first added a <p /> element as the first element in the <div> that the <input> element would align flush. Here is an example ...

<div style="float:left;">
  <p />
  <b>Some Text</b>
  <asp:TextBox ID="txtTextBox" runat="server" TextMode="MultiLine" Style="width:300px;height:300px;"  />
</div>

Does anyone know why this is? Why does the <input> element not align flush to the <div>, yet when adding a <p /> do the <div> it does?

UPDATE - I found the issue was Internet Explorer compatibility mode. It was enabled and therefore not following the CSS rules. After disabling compatibility mode the textbox lined up properl开发者_如何学运维y. Thanks for all the answers. They were ALL great and helped me track down the problem. +1 to all. I answered the post so as to make it easier for future readers to find the answer.

---

I don't know what asp does with this and your p element is invalid in html as you have it. Remove that.

You probably need to set your padding or margin to zero on the input element.

Are you using a doctype?

---

I don't see any problem when I test your example, the TextBox is flush to the edge of the div at the top, right and bottom (with Some Text on the bottom left).

There must be other CSS affecting your layout.

I'd suggest using Firebug, IE's F12 developer tools or Chrome's Ctrl-Shift-J developer tools (dependent on your browser) to have a look at the HTML that's created. That should give you the answers you need.

---

I believe this is because <p> is a block element. You can do what you are wanting to do by adding a div around your inner content (nesting a div inside your existing div)

<div style="float:left;">   
    <div>   
        <b>Some Text</b>   
        <asp:TextBox ID="txtTextBox" runat="server" TextMode="MultiLine" Style="width:300px;height:300px;"  />
    </div>
</div>

---

1. check if you have correct doctype on top of your page
2. use vertical-align style in the text container div: <span style="vertical-align:middle; font-weight:bold;">Some Text</span>

.

   <div style="float:left;">
      <span style="vertical-align:middle; font-weight:bold;">Some Text</span>
       <asp:TextBox ID="txtTextBox" runat="server" TextMode="MultiLine" Style="width:300px;height:300px;"  />
     </div>

---

I discovered what the issue was. I was using Internet Explorer v8 with compatibility mode enabled. I am not sure why it was enabled but as soon as I disabled compatability mode the textbox aligned just as it should.