Question

所以我正在为Tumblr主题设计一些东西，我遇到了一个非常烦人的问题。我正在编写Reblog和Like按钮，Reblog按钮工作正常，但由于某种原因，Like按钮在底部提供了额外的5px填充。这不是一个严重的问题，但它真的很烦我，因为我无法找到摆脱它的方法。我试着改变高度，最大高度，定位等等，没有什么可以摆脱底部的额外空间。这可能是我的一些愚蠢的错误，或者也许它应该是那样的，我没有意识到它，因为它为时已晚，但任何帮助都会很好。这是我的测试博客，其中我设置了主题。如果您查看源，或鼠标悬停在Like按钮上，您可以看到。 http://mchickenposts.tumblr.com/

编辑：我可以扩展你的长度，并添加游标属性，这样就不会遗漏底部的5px。但我想知道如何完全摆脱它。

这是我的帖子的Html代码，以及Css。

.post_reblog_like{
    list-style-type:none;
    padding:0px;
    margin:0px;
    display:inline-block;
    float:right;
}
.post_reblog_like li{
    display:inline-block;
    opacity:.7;
}
.post_reblog_like li:hover{
    opacity:1;
} 
{block:Text}
                <div class="post_wrapper">
                    <div class="post_text">
                        <div class="post_text_body">
                            {block:Title}
                                <a class="PostTitle" href="{Permalink}">{Title}</a>
                            {/block:Title}
                            {block:NoteCount}
                                <a class="post_notes" href="{Permalink}">{NoteCountWithLabel}</a>
                                {/block:NoteCount}
                            <div class="PostBody">{Body}</div>
                        </div>
                            <div class="post_date">
                                {block:Date} 
                                    <a title="{DayOfWeek}, {Month} {DayOfMonth}, {Year} @ {12Hour}:{Minutes} {AmPm}" class="post_date_text" href="{Permalink}">{TimeAgo}</a>
                                {/block:Date}
                                <ul onmouseover="changeClass();" class="post_reblog_like">
                                    <li title="Reblog">{ReblogButton color="white" size="20"}</li>
                                    <li title="Like">{LikeButton color="white" size="20"}</li>
                                </ul>
                            </div>
                    </div>
                </div>
            {/block:Text}

Answer 1

我认为这个问题与line-height有关（目前没有定义）。

.like_button {
    line-height: 0px;
}

Answer 2

将.like_button更改为display: block，然后更改为float: left。 display: inline和inline-block的元素总是会在底部添加一些空格，例如＆＃39; y＆＃39;或者＆＃39; g。希望它可以帮助别人！

Tumblr主题中的填充问题

2 个答案: