Html div内的额外填充物_Html_Css_Padding

Html div内的额外填充物

html css

Html div内的额外填充物,html,css,padding,Html,Css,Padding,我无法确定从何处向div添加额外的填充包含文本“Video Title”的div添加了太多的填充。这是非常不需要的。我不知道这些额外的填充物是从哪里来的我已经使用这个示例页面添加了样式、html代码和页面链接请看一看，我快要发疯了风格-- html* { 保证金：0；填充：0；边界：0；大纲：0；垂直对齐：基线； } 表1.1视频列表 { 宽度：100%；边界塌陷：塌陷； } 表1.1视频列表td { 填充物：5px；宽度：33%； } div.vid_集装箱 { /*浮

我无法确定从何处向div添加额外的填充

包含文本“Video Title”的div添加了太多的填充。这是非常不需要的。我不知道这些额外的填充物是从哪里来的

我已经使用这个示例页面添加了样式、html代码和页面链接

请看一看，我快要发疯了

风格--


html*
{
保证金：0；
填充：0；
边界：0；
大纲：0；
垂直对齐：基线；
}
表1.1视频列表
{
宽度：100%；
边界塌陷：塌陷；
}
表1.1视频列表td
{
填充物：5px；
宽度：33%；
}
div.vid_集装箱
{
/*浮动：左*/
/*边缘底部：15px；
左边距：5px；
右边距：15px*/
位置：相对位置；
显示：内联块；
/*宽度：242px*/
利润率：10px；
/*宽度：300px*/
}
div.vid_集装箱div.duration
{
/*背景色：#160A07*/
/*背景色：透明；
背景图像：url（../images/backs/duration\u back\u 58x24.png）；
背景位置：中心；
背景重复：无重复*/
-moz边界半径：3px；
-webkit边界半径：3px；
背景色：#1b1b1b；
底部：27px；
颜色：#FFFFFF；
浮动：对；
字体大小：14px；
填充：4px；
位置：相对位置；
右：2px；
文本对齐：居中；
宽度：50px；
过滤器：α（不透明度=85）；
不透明度：0.85；
字体大小：粗体；
}
div.vid_集装箱div.info_支架
{
宽度：248px；
保证金：自动；
显示：块；
}
分区可视容器分区拇指支架
{
宽度：244px；
高度：184px；
垂直对齐：中间对齐；
边框：实心1px#323434；
填充：1px；
保证金：自动；
}
分区可视容器分区拇指支架img拇指
{
宽度：236px；
高度：176像素；
垂直对齐：中间对齐；
边框：实心1px#323434；
}
div.vid_容器a.标题
{
颜色：#DBA0AC；
显示：块；
字体大小：14px；
高度：35px；
溢出：隐藏；
文字装饰：无；
空白：行前；
宽度：248px；
垫面：1px；
垫底：1px；
}
div.vid_容器a.标题：悬停
{
文字装饰：下划线；
}
div.vid_容器div.info_支架div.info_文本
{
边缘顶部：5px；
文本对齐：左对齐；
垫面：1px；
垫底：1px；
}
div.vid_容器div.info_支架div.time
{
颜色：#ccc；页边空白：5px；字体大小：90%；
文本对齐：左对齐
}
/******************************************
视频列表
******************************************/
.vid_容器.站点名称
{
文本转换：大写！重要；
}
.vid_容器img.thumb
{
宽度：242px！重要；
高度：182px！重要；
边框：1px实心#323434！重要；
}
/******************************************
列表视图
******************************************/
div.vid\u容器\u列表视图
{
宽度：100%！重要；
}
div.vid\u容器\u列表视图div.thumb\u支架
{
浮动：左！重要；
}
div.vid\u容器\u列表视图div.info\u支架
{
浮动：左！重要；
左边距：10px；
}
div.vid\u container\u listview div.info\u holder div.title\u holder
{
最小高度：30px；宽度：600px；
}
div.vid\u容器\u列表视图div.info\u支架div.info\u文本
{
颜色：#ccc；页边顶部：5px；
}
div.vid\u container\u listview div.info\u holder div.info\u text div.site\u name
{
字体大小：100%；页边空白：15px；
}
div.vid\u container\u listview div.info\u holder div.info\u text div.likes\u和\u视图
{
字体大小：100%；页边空白：15px；
}
div.vid\u container\u listview div.info\u holder div.added\u位于
{
颜色：#ccc；页边空白：5px；字体大小：100%；
}
div.vid_容器_列表视图a.title
{
字体大小：16px；
字体大小：粗体；
}
1.向左浮动
{
浮动：左；
}
.你是对的
{
浮动：对；
}
清楚的
{
明确：两者皆有；
}

以及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>


30:16
16天前
Youtube
1-140次浏览

此示例页面的链接是：

根据我的Firebug addin，额外的填充是由

中包含的

元素的这两个属性引起的

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

编辑：溢出似乎也可能是由于

上的此属性造成的：

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

如果此规则更适合您的需要，您可以尝试禁用它。它将删除div顶部的额外填充。

但是，标题底部仍然有额外的空间，这是由

元素的高度引起的，如上所述。