Question

我想在类页脚中的文本和下面显示的类footer2之间留出一些空格

为此，我将填充底部添加到上面的页脚，并在顶部填充顶部到

我在两个填充中使用1px得到了一个非常大的空间..如何在不在2英尺的棕色背景之间留出空白的情况下减少它？

尝试更好的说明..谢谢

.footer { 
    font-style: italic; 
    font-family: arial;  
    font-size: 10pt;  
    text-align: center;  
    background-color: #996633;  
    padding-top: 1px;  
    padding-right: 50px;  
    padding-bottom: 1px;  
    padding-left: 50px; 
}

.footer2 {  
    font-style: italic;  
    font-family: arial;  
    font-size:10pt;  
    text-align:center;  
    background-color: #996633;  
    padding-top: 1px;  
    padding-right: 50px;  
    padding-bottom: 1px; 
    padding-left: 50px;
}

<div class="footer">
    <pre>
        <em>23 Pine Road</em>
        <em>Nottingham, NGI 5YU</em>
        <em>0115 9324567</em>
    </pre>
</div>

<div class="footer2">
    <pre>
        <em>Copyright &copy 2011 Jake's Coffee House</em>
        <a href="http://www.hotmail.com" > jake@jcoffee.com </a>
    </pre>
</div>

Answer 1

pre标签具有自然边距，这就是您看到空白区域的原因。只需将pre

的边距设置为0即可

pre { margin: 0; }

http://jsfiddle.net/s8uhpfc8/

可以随意调整2个页脚类的填充顶部/底部，但pre上的边距是空白区域的原因。

Answer 2

以下是许多可能的解决方案：

删除div
的边距
- 第一个div
```
margin-bottom: -1cm;
```
或
- 第二个div：
```
margin-top: -30px;
```
将pre标记为inline：
```
pre {
    display: inline;
}
```
查看为margin

pre

Answer 3

pre { 
   margin: 0px;
   white-space: nowrap;
}

这将删除页脚之间不需要的空间。然后，您可以使用“填充”或“边距”调整间距。

减少HTML-CSS中的间距

3 个答案: