Question

我无法确定从div添加额外填充的位置。

包含文本“视频标题”的div添加了太多填充。这是非常不受欢迎的。我不知道这个额外填充的来源。

我已使用此示例页面添加了样式，html代码和指向页面的链接。

请看一下，我快要疯了。

风格 -

<style type="text/css">
    html *
    {
        margin: 0;
        padding: 0;
        border: 0;
        outline: 0;
        vertical-align: baseline;
    }
    table.video_list
    {
        width: 100%;
        border-collapse: collapse;
    }

    table.video_list td
    {
        padding: 5px;
        width: 33%;
    }

    div.vid_container
    {

        /*float:left;*/
        /*margin-bottom:15px;
        margin-left:5px;
        margin-right:15px;*/
        position: relative;
        display: inline-block;
        /*width:242px;*/
        margin: 10px;
        /*width: 300px;*/
    }

    div.vid_container div.duration
    {
        /*background-color:#160A07;*/
        /*background-color: transparent;
        background-image: url(../images/backs/duration_back_58x24.png);
        background-position: center center;
        background-repeat: no-repeat;*/

        -moz-border-radius: 3px;
        -webkit-border-radius: 3px;

        background-color: #1b1b1b;
        bottom:27px;
        color:#FFFFFF;
        float:right;
        font-size:14px;
        padding:4px;
        position:relative;
        right:2px;
        text-align:center;
        width:50px;
        filter: alpha(opacity = 85);
        opacity: 0.85;
        font-weight: bold;

    }

    div.vid_container div.info_holder
    {
        width: 248px;
        margin: auto;
        display: block;
    }

    div.vid_container div.thumb_holder
    {
        width: 244px;
        height: 184px;
        vertical-align: middle;
        border: solid 1px #323434;
        padding: 1px;
        margin: auto;
    }

    div.vid_container div.thumb_holder img.thumb
    {
        width: 236px;
        height: 176px;
        vertical-align: middle;
        border: solid 1px #323434;
    }
    div.vid_container a.title
    {
        color:#DBA0AC;
        display:block;
        font-size:14px;
        height:35px;
        overflow:hidden;
        text-decoration:none;
        white-space:pre-line;
        width:248px;
        padding-top: 1px;
        padding-bottom: 1px;
    }

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

    div.vid_container div.info_holder div.info_text
    {
        margin-top:5px;
        text-align: left;
        padding-top: 1px;
        padding-bottom: 1px;
    }

    div.vid_container div.info_holder div.time
    {
        color: #ccc;margin-top: 5px;font-size: 90%;
        text-align: left
    }




    /******************************************
        Videos list
    ******************************************/

    .vid_container .site_name
    {
        text-transform: capitalize !important;
    }

    .vid_container img.thumb
    {
        width: 242px !important;
        height: 182px !important;
        border:1px solid #323434 !important;
    }

    /******************************************
        List View
    ******************************************/

    div.vid_container_listview
    {
        width: 100% !important;
    }

    div.vid_container_listview div.thumb_holder
    {
        float: left !important;
    }

    div.vid_container_listview div.info_holder
    {
        float: left !important;
        margin-left: 10px;
    }

    div.vid_container_listview div.info_holder div.title_holder
    {
        min-height:30px;width:600px;
    }

    div.vid_container_listview div.info_holder div.info_text
    {
        color: #ccc;margin-top: 5px;
    }

    div.vid_container_listview div.info_holder div.info_text div.site_name
    {
        font-size: 100%;margin-top:15px;
    }

    div.vid_container_listview div.info_holder div.info_text div.likes_and_views
    {
        font-size: 100%;margin-top:15px;
    }

    div.vid_container_listview div.info_holder div.added_at
    {
        color: #ccc;margin-top: 5px;font-size: 100%;
    }

    div.vid_container_listview a.title
    {
        font-size: 16px;
        font-weight: bold;
    }

    .float_left
    {
        float: left;
    }

    .float_right
    {
        float: right;
    }

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

和Html：

<div class="vid_container">
    <div class="thumb_holder">
        <a href="#" title="Brunette Teen Paige Taylor">
            <img alt="Brunette Teen Paige Taylor" class="thumb" src="empty_thumb.png" norotate="1" />
        </a>

        <div class="duration">30:16</div>
    </div>

    <div class="info_holder">
        <div class="info_text">
            <a class="title" href="#" title="Brunette Teen Paige Taylor">Video Title</a>
        </div>  

        <div class="time">16 days  ago</div>                    

        <div style="color: #ccc;margin-top: 5px;">
            <div class="float_left site_name" style="font-size: 90%;">Youtube</div>
            <div class="float_right" style="text-align:right;padding-right: 2px;font-size: 90%;">1 likes — 140 views</div>
            <div class="clear"></div>
        </div>
    </div>
</div>

此示例页面的链接是：Sample Page

Answer 1

您需要更改div.vid_container a.title规则

删除overflow:hidden并将height:35px更改为

height:auto!important;
height:35px;
min-height:35px;

<强> 更新

我看到......问题是.duration框位于相对位置，因此它保留在DOM的流中..这就是占用.title之上的空间.. < / p>

您需要将.duration设置为position:absolute和margin-top:-27px;（并删除bottom属性

应该解决所有问题..

Answer 2

根据我的Firebug插件，额外的填充是由<a>

中包含的<div>元素的这两个属性引起的

div.vid_container a.title {
    height:35px;
    width:248px;
}

在css编辑器中禁用这些规则会删除额外的填充（顶部和底部）。

修改：似乎溢出也可能是由<div>上的此属性引起的：

div.vid_container div.info_holder div.info_text {
    padding-top:1px;
}

如果更符合您的需求，您可以尝试禁用此规则。它将删除div顶部的额外填充。但是，您仍然会在标题的底部留出额外的空间，这是由<a>元素的高度引起的，如上所述。

Answer 3

如果你没有它，请下载firefox。
安装firebug（插件）
在firefox中打开firebug并加载页面。
右键单击带有视频标题的div并选择inspect元素
查看样式和计算选项卡以查看影响填充的内容。

Answer 4

div.vid_container a.title的高度为35px，这使得您的链接更大。我相信这就是你没想到的额外空间（在firefox中找到萤火虫的礼貌）。

编辑：首先没有注意到水平填充，但是作为Thibault Falise，那里也只有一个宽度。

Answer 5

根据Firebug（我建议你使用）并检查你提供的链接，div的填充为1px，上边距为5px，如css中所述。所以本身没有额外的填充。

根据建议，您可能想要更改a.title（高度，宽度）的大小。

div中的额外填充

5 个答案: