css - HTML align Image -

i have create folowing html

http://www.bilder-upload.eu/show.php?file=714cc2-1469113881.jpg

how can change alignment images place @ bottom of white area? tried align-vertical not work. , want not change width of images fit.

this should result

but maneged 'margin-top:-4em' , think not right way because possition changed if window becomes smaller

this code

html

<nav class="nav">    <ul>      <li><a href="index.html" class="active"><img src="images/home.png" /></a></li>      <li><a href="index.html" class="active"><img src="images/auto.png" /></a></li>      <li><a href="index.html" class="active"><img src="images/bus.png" /></a></li>      <li><a href="index.html" class="active"><img src="images/bahn.png" /></a></li>    </ul>  </nav>

css

/* navigation */  nav  {      display:block;      height:2.5em;      background:#ffffff;      text-align:center;  }    nav ul  {      display:block;     }    nav ul li  {      display:inline;         margin:0em 0.188em 0em 0.188em;             }    nav ul li  {      color:#454040;      font-size:1.125em;      line-height:2.5em;        padding:0.563em 0.938em 0.375em 0.983em;      transition:background 0.2s;      -webkit-transition:background 0.2s;  }    nav ul li img  {              width:4%;         height:auto;  }

thanks greetings nejox

if understand correctly, if want change placement of images closer white area in image (without distorting image) need photo editor (i.e. photoshop) edit image. css can not make change.

also appears working 2 separate images. 1. image in code 714cc2-1469113881.jpg width 928px , height 139px. image in example uyhcb.jpg width 546px , height 172px. why 2 different images? 2. why image within input tag outside form tag?