Uneeded space in div container

I am creating a theme for Tumblr, so it's not all raw HTML. For some reason, I am getting a space above my picture caption. It should be about the same size of padding as my text posts (as you can see in the image: http://puu.sh/5x85e.png). I've Googled it and nothing comes up for this. Either that or I'm wording it wrong.

Here is my code:

<!DOCTYPE html>
<html>
<head>

<title>

    {Title}{block:PostSummary}, {PostSummary}{/block:PostSummary}

</title>

{block:Description}

    <meta name="description" content="{MetaDescription}" />

{/block:Description}

<link rel="shortcut icon" href="{Favicon}" />

<link href='http://fonts.googleapis.com/css?family=Roboto:400,300,700' rel='stylesheet' type='text/css'>

<style type="text/css">

    body {
        font-family: roboto;
        background-color: #e5e5e5;
        margin-top: 10px;
        word-wrap: break-word;
    }

    #wrapper {
        width: 500px;
        margin-left: auto; 
        margin-right: auto;
    }

    .content {
        padding: 20px;
        background-color: #ffffff;
        margin-bottom: 10px;
        border: 1px solid #d9d9d9;
    }

   .title img {
       border-radius: 100%;
       margin-right:10px;
       float:left;
   }

   .title a {
       font-weight: 700;
       color:#000;
       text-decoration: none;
   }

   .title a:hover {
       text-decoration: underline;
   }

   .body {
       font-weight: 400;
       font-size: 13px;
       color: #404040;
   }

   .dateNote {
       font-weight: 400;
       font-size: 12px;
       color: #909090;
   }

   .tags {
       font-size:12px;
   }

   .tags a {
       font-weight: 400;
       color: #909090;
       text-decoration: none;
   }

   .postPhoto img {
       max-width:100%; 
       max-height:100%;
   }

   .caption {
       font-weight: 700;
       color:#000;
       text-decoration: none;
   }

</style>

</head>

<body>

    <div id="wrapper">

        {block:Posts}

            <div class="content">

            <!-- Text Posts -->

                {block:Text}

                    <div class="title">

                        {block:Title}

                            <img src="{PortraitURL-40}" />

                            <a href="{Permalink}">{Title}</a>

                        {/block:Title}

                    </div>

                    <div class="dateNote">

                        {NoteCount} Notes &nbsp; — &nbsp; {TimeAgo}

                    </div>

                    <div class="body">

                        {Body}

                    </div>

                {/block:text}

                <!-- End Posts -->

                <!-- Photo Posts -->

                {block:Photo}

                {block:Caption}

                        <div class="caption">

                            {Caption}

                        </div>

                    {/block:Caption}

                    <a class="postPhoto">

                    <img src="{PhotoURL-500}" alt="{PhotoAlt}" />


                    </a>

                {/block:Photo}

                <!-- End Photo Posts -->

                <!-- Tags -->

                {block:HasTags}

                        <div class="tags">

                            {block:Tags}

                                <a href="{TagURL}">#{Tag} </a>

                            {/block:Tags}

                        </div>

                {/block:HasTags}

                <!-- End Tags -->

            </div>

        {/block:Posts}

    </div>

</body>

</html>

Solution

Add this CSS:

.caption p {
  margin: 2px 0 !important;
}

done.