Réduire espacement entre titre et texte+ centrage

J'ai fait plusieurs test sur mon code css mais je n'arrive pas à réduire l'espacement entre mon titre (item a et b) et la description (item p)

margin: auto;

<code><script>

$(document).ready(function() {

 //move the image in pixel
 var move = -15;
 
 //zoom percentage, 1.2 =120%
 var zoom = 1.2;

 //On mouse over those thumbnail
 $('.item').hover(function() {
  
  //Set the width and height according to the zoom percentage
  width = $('.item').width() * zoom;
  height = $('.item').height() * zoom;
  
  //Move and zoom the image
  $(this).find('img').stop(false,true).animate({'width':width, 'height':height, 'top':move, 'left':move}, {duration:200});
  
  //Display the caption
  $(this).find('div.caption').stop(false,true).fadeIn(200);
 },
 function() {
  //Reset the image
  $(this).find('img').stop(false,true).animate({'width':$('.item').width(), 'height':$('.item').height(), 'top':'0', 'left':'0'}, {duration:100}); 

  //Hide the caption
  $(this).find('div.caption').stop(false,true).fadeOut(200);
 });

});

</script>
<style>
body 
 {<strong>></strong>
  <link href='http://fonts.googleapis.com/css?family=raleway' rel='stylesheet' type='text/css'>
<strong>></strong>}


.item {
 width:250px;
 height:250px; 
 border:2px solid #222; 
 margin:5px 5px 5px 0;
 
 /* required to hide the image after resized */
 overflow:hidden;
 
 /* for child absolute position */
 position:relative;
 
 /* display div in line */
 float:left;
}

.item .caption {
 width:250px;
 height:250px;
 background:#000;
 color:#fff;
 font-weight:light;
        text-align:center;
        
       
      
  
 /* fix it at the bottom */
 position:absolute;
 left:0;

 /* hide it by default */
 display:none;

 /* opacity setting */
 filter:alpha(opacity=80);    /* ie  */
 -moz-opacity:0.8;    /* old mozilla browser like netscape  */
 -khtml-opacity: 0.8;    /* for really really old safari */  
 opacity: 0.8;    /* css standard, currently it works in most modern browsers like firefox,  */

}

.item .caption a {
 text-decoration:none;
 color:#9400D3;
 font-size:20px; 
 font-weight:normal;
        text-align:center;
        line-height:normal;

 /* add spacing and make the whole row clickable*/
 padding:5px; 5px; 20px; 5px;
 display:INLINE-BLOCK;
}

.item .caption b {
 text-decoration:none;
 color:#9400D3;
 font-size:20px; 
 font-weight:bold;
        text-align:center;
        line-height:normal;

 /* add spacing and make the whole row clickable*/
 padding:5px; 5px; 20px; 5px;
 display:INLINE-BLOCK;
}

.item .caption p {
 padding:2px; 2px; 5px; 2px;
 margin:2;
 font-size:16px;
        font-weight:light;
        text-align:center;
        line-height:normal;
         
}

.item img {
 border:0;
 
 /* allow javascript moves the img position*/
 position:absolute;
}

.clear {
 clear:both; 
}
</style>
>

position: relative;
        top: 40%;