Why this <a> margin doesnt move the container div?

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:5开发者_JAVA百科px;" href="#">
        <img alt="Cerca" src="/private_images/home_button_right.png">
    </a>
</div>

Change to:

.myLink
{
    background-color: red;
    padding-top: 100px;
    display: inline-block;
}

or

div {
    padding-top: 100px;
}

depending on what you want to achieve.

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.

Do the opposite thing:

.myDiv
{
    background-color: blue;
    padding-bottom: 20px;
}

.myLink
{
    background-color: red; 
}

Add display: block; or maybe even better: display: inline-block;. Block elements can have height. Inline elements not.

You might also consider to give the anchor a larger line-height (e.g. line-height: 2em;), but that only works for single-line text.

.myDiv
{
    background-color: blue;
}

.myLink
{
    background-color: red;
    display:list-item;
}

You can use display:list-item; to solve this problem