Question

我不知道为什么我在TextContainer的顶部边框和文本之间有一个很大的空间。（我确实重置了浏览器）

CSS

#TextContainer {
    position: relative;
    width: 750px;
    height: 400px;
    top: 50px;
    margin: auto;
    border: 2px solid #000; 
    }

HTML

  <div id="Container">
    <div id="TextContainer">
      <font>(Text)</font>
    </div>
  </div>

JSFiddle.

Answer 1

在id容器中更改：

display: block

到

display: inline-block

以下是我所做的更改：

#Container {
    display: inline-block;
    position: relative;
    z-index: 2;
    width: 980px;
    height: 900px;
    background: #FFF;
    top: 5px;
    -webkit-transition: top, opacity;
    -webkit-transition-duration: 1.5s;
    }

这里的工作是jsfiddle。

http://jsfiddle.net/UbVz7/1/

澄清高度auto和块内联。

如果您想将高度设置为400px，则需要设置display：inline-block，如上所示。

如果您想制作div auto，它会将内容的大小添加到div中，那么可以添加height：auto;

 #Cabeçalho {
display: block;
position: relative;
z-index: 2;
width: 980px;
height: auto;
background: #FFF;
}

这是因为设置为400px的高度正在推动块元素中的任何内容以实现其400px。

内联块允许数据重叠，将文本推回到您想要的位置。

这是因为你的重叠效应。

当某个东西不适合时，使用一个块元素，它会被推到下一行。

Answer 2

我不知道为什么，但如果你将高度改为自动，空间就会消失。可能是对齐问题？

 #Cabeçalho {
display: block;
position: relative;
z-index: 2;
width: 980px;
height: auto;
background: #FFF;
}

边框和文字之间的差距

2 个答案: