Question

I have this code :

.myDiv
{
    background-color: blue;
}

.myLink
{
    background-color: red; 
    margin-top: 20px; 
}

<div class="myDiv">
    <a class="myLink" href="javascript:void(0)">Ciao</a>
</div>

if I increase the margin-top I’d aspect that the div becomes more hight (and the go to the bottom of the div), but in fact this doesnt happens! The same with padding-top (it go out of the div…). It doesnt listen the container!

Why? And how can I fix this trouble?

EDIT

in fact what Id like to do is align an input box and a image, you can see the example here :

<div>
    <input type="text" />
    <a style="margin-top:10px; margin-left:5px;" href="#">
        <img alt="Cerca" src="/private_images/home_button_right.png">
    </a>
</div>

Answer 1

Based on your update of the question:

Updated Demo fiddle.

CSS:

input,
img {
    vertical-align: middle;
}

Or use vertical-align: top; to align the tops.