Question

http://jsfiddle.net/vol7ron/yHdr6/

The INPUT is taking the margin-left from the ancestor DIV.
Setting the margin of the parent DIV/SPAN/INPUT has no effect (unless I missed one).

---

HTML

---

<form>
   <div id="contact_info">
      <div><span>Name:  </span></div>
      <div><span>Email: </span></div>
      <div><span>Phone: </span></div>
      <div>
         <label for="email">Owner Email: </label>
         <span class="ib">
            <input type="text" name="email" id="email"/><br />
            <span>(correct if needed)</span>
         </span>
      </div>
   </div>
</form>

---

CSS

---

span.ib { 
    border         : 1px solid red;  /* for debugging */
    display        : inline-block; 
    vertical-align : top; 
} 

#contact_info {
    border         : 1px solid #ccc; 
    margin         : 1em 2em; 
    padding        : 1em;
}

/* Debugging Attempts *
.ib,input {
    clear:left;
    display:inline-block;
    margin:0em 0em !important;
    left:0;
    padding:0em 0em !important;
    position:relative;
    text-align:left;
    text-indent:0 !important;
}/**/

Answer 1

So after trying two more things, I found that adding either zoom:1 or display:inline-block; to the input’s parent DIV (not the SPAN), will remove this weird indent. Thus, it’s another hasLayout problem.

I have not found out why setting the margin does not fix it and I’ve forgotten the rules as to when Internet Explorer inherits the properties from parent vs sibling.