Question

我在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都有一个底部填充，他们不应该拥有它。

Answer 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/

Answer 2

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

底部填充div错误

2 个答案: