邊框和文字之間的差距

我不知道爲什麼我會在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.

來源

2014-02-18 Harlequin

而小提琴中有更多的代碼的原因是，當我擦除它使它更容易爲你形象化的差距消失，所以它必須是在代碼的其餘部分：P – Harlequin

你忘了關閉你內心' div' – rockStar

所有divs看起來都對我不利。 – berentrom

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

爲了闡明高度自動和塊內聯。

如果您想將高度設置爲400像素，您將需要設置display：inline-block，如上所示。

如果你想使div的自動，將內容的大小添加到div然後可以添加高度：auto;

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

這是因爲身高被設置爲400像素的下推東西都在一個塊級元素，以實現其400像素。

內嵌塊允許數據重疊，這會將文本重新放回到您想要的位置。

這是因爲你的重疊效應。

使用塊元素時，某些東西不適合，它被推到下一行。

來源

2014-02-18 19:02:21 wuno

現在，整個#Container被向下推。首先你可以看到容器幾乎碰到了#Header，但現在我認爲是向下推送#Container的登錄，註冊和下載li。 – Harlequin

將#MenuWrapper更改爲內聯塊並將其修復！要閱讀更多「內聯塊和塊之間的區別」 – Harlequin

我不知道爲什麼，但如果你改變了高度汽車，空間消失。也許是對齊問題？

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

來源

2014-02-18 18:56:41

邊框和文字之間的差距

回答

相關問題