html - div 容器中不需要的空间

我正在为 Tumblr 创建一个主题，因此它不全是原始 HTML。由于某种原因，我的图片标题上方有一个空格。它的填充大小应该与我的文本帖子大小相同(如图所示: http://puu.sh/5x85e.png )。我用谷歌搜索了一下，没有发现任何结果。要么是我的措辞错误。

这是我的代码:

<!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>

最佳答案

添加此 CSS:

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

完成。

关于html - div 容器中不需要的空间，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/20294367/

html - div 容器中不需要的空间

上一篇：html - 使用 css 悬停时在 li 元素内显示 div 不起作用

下一篇：html - 流体设计 - 边框半径 : 10px on an img