Question

我正在为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>

Answer 1

添加此CSS：

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

进行。

Answer 2

没有HTML，所以我无法确定文件结构是什么

似乎标题是标题或段落元素，其中包含由浏览器的用户代理签署的1em margin-top和margin-bottom（请注意下图中的绿色区域）。尝试删除标题的margin-top（绿色区域的顶部）或标题容器的padding-top（红色区域的顶部）。

修改：

“这是一个标题，仅用于测试”实际上是一个段落，就像我预测的那样。定位所有p元素会破坏您博客的设计。相反，您应该使用以下选择器.caption p
来定位标题的段落
.caption p{ margin-top: 0; }

div容器中不需要的空间

2 个答案: