Common problems with padding/margin: how can I resolve it?

I learn that is a classic problem on IE7 :

<div class="loc_main">    
    <div class="loc_cerca">
        <div class="event_cerca_item">
            Field
        </div>

        <div class="event_cerca_item">
            <input type="text" class="loc_cerca_input_hidden" />
        </div>    
    </div>    
</div>

.loc_main
{
    margin-left:30px;    
}

.loc_cerca
{
    padding-top:50px;
}

.loc_cerca_input_hidden
{
    border:1px solid #6D6E70;
    width:500px;
}

.event_cerca_item
{
    width:500px;
    float:left;
}

If you check on IE7 (here there is a fiddler example) you'll see that the Input Box inherits the margin-left and the padding-top from the div container.

In fact, if I swap margin-left:30px; with padding-left:30px; (on .loc_main) and padding-top:50px; with margin-top:50px; (on .loc_cerca) this will disappear.

It's a common IE7 bug, but I'd like to know how should I fix this troubles. Any idea? Or I just need to remember to put margin on top/bottom and padding on left/ri开发者_如何转开发ght?

Many IE7 bugs/inconsistencies are based on whether or not certain elements have a proprietary "property" named hasLayout. A common way to provide it is zoom: 1, because it has no (relevant) side effects other than setting hasLayout to true.

Your specific example can be fixed by adding zoom: 1 to .loc_cerca.

See: http://jsfiddle.net/gC4gP/17/