底部填充 div 错误答案

【问题标题】：Bottom padding div error底部填充 div 错误
【发布时间】：2012-03-18 08:43:43
【问题描述】：

我在 div 中有一个奇怪的底部填充，即使我将 padding 设置为 0。我认为它是从某些东西继承而来的，但我删除了所有填充以查看是什么导致它并且它仍然会发生。

这是我的 CSS：

.magazinelistdiv {
width: 804px;
}

.magazinelistdiv .magrowdiv {
width: 800px;
border-top: 1px solid #333388;
border-bottom: 1px solid #333388;
padding-bottom: 0px;    
}

.magazinelistdiv .magrowdiv div {
display:inline-block;

font-size: 20px;
width: 65px;
text-align: center;
}

.magazinelistdiv .magrowdiv .zero{
color: red;
}

.magazinelistdiv .magrowdiv .id {
width: 40px;
margin: 7px 0;
}

.magazinelistdiv .magrowdiv .number { 
width: 100%; 
}

.magazinelistdiv .magrowdiv .text {
font-size: 8px;
width: 100%;
}

.magazinelistdiv .magrowdiv .magazine {
width: 410px;
text-align: left;
}

.magazinelistdiv .magrowdiv .visits {
font-style: italic;
color: #444;
}

.magazinelistdiv div:hover { 
background-color: #eee; 
}

.magazinelistdiv .magrowdiv a:hover {
text-decoration: none;
padding: 3px;
background-color: #ddd;
border-radius: 0.3em;
-moz-border-radius: o.3em;
-webkit-border-radius: 0.3em;
border: 1px solid #333;
display:block;
width: 390px;
}

这是我的输出 html：

<div class="magazinelistdiv">
    <div class="magrowdiv odd" id="magrowdiv1">
            <div class="id">1</div> 
            <div class="magazine"><a href='index.php?act=magazine&id=5'>Mag1</a></div>
            <div class="issues zero">
                <div class="number">0</div>
                <div class="text">Issues</div>
            </div> 
            <div class="series zero">
                <div class="number">0</div>
                <div class="text">Series</div>
            </div>
            <div class="chapters zero">
                <div class="number">0</div>
                <div class="text">Chapters</div>
            </div> 
            <div class="pages zero">
                <div class="number">0</div>
                <div class="text">Pages</div>
            </div> 
            <div class="visits zero">
                <div class="number">0</div>
                <div class="text">Visits</div>
            </div> 
            <div></div>
        </div>
        </div>

我认为我在 CSS 中有很多错误，因为发生了更多的事情，但我不知道如何修复它们，但我特别关注底部填充的事情。

更具体地说，magrowdiv div 中的所有 div 都有一个底部填充，它们不应该有它。

【问题讨论】：

你在不同的浏览器上试过了吗，也许是多个浏览器？
您刚刚发布了很多代码以及一般的抱怨......您的具体问题是什么？你在说什么div？您是否使用 Safari、Chrome、Firefox 或 Explorer 中的开发人员工具检查了 DOM？除非可以添加更多信息，否则投票结束。
在您的问题中添加生成的 HTML 而不是使用 PHP 生成的 HTML，会有所帮助。
1.如果您粘贴文件的输出（html），而不是 php.ini，会更有帮助。 2. “in a div” - 请更具体。哪个 div？
我已经编辑了帖子。更具体地说，“magrowdiv”中的所有 div 都有我不知道从哪里来的底部填充。

标签： html css padding

【解决方案1】：

很难从您发布的内容中看出。但是，如果我更改以下内容

.magazinelistdiv .magrowdiv .id {
    width: 40px;
    margin: 7px 0;
}

到

.magazinelistdiv .magrowdiv .id {
    width: 40px;
    margin: 0; /* REMOVE THE TOP & BOTTOM MARGIN */
}

它收紧了divs。

请参阅此示例：http://jsfiddle.net/jYn8F/

【讨论】：

【解决方案2】：

根据您发布的代码，HTML 中有两个多余的结束 div 标记。

【讨论】：