2016-05-23 168 views
2

我在底部和頂部的div之間得到空格(水平),我不知道原因。divs之間的空格

#header { 
 
    display: inline-block; 
 
    float: left; 
 
    width: 100%; 
 
    height: auto; 
 
} 
 
#header #date { 
 
    display: inline-block; 
 
    float: left; 
 
    width: 100%; 
 
    height: auto; 
 
} 
 
#header #date #date_day_month { 
 
    display: inline-block; 
 
    float: left; 
 
    width: 100%; 
 
    height: auto; 
 
    line-height: 75px; 
 
    background-color: #E96567; 
 
    color: #FFF; 
 
    text-align: center; 
 
    font-family: "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, sans-serif; 
 
    font-size: 35px; 
 
    margin: 0px; 
 
} 
 
#header #date #date_day { 
 
    display: inline-block; 
 
    float: left; 
 
    width: 100%; 
 
    height: auto; 
 
    line-height: 40px; 
 
    background-color: #DB5658; 
 
    color: #FFF; 
 
    text-align: center; 
 
    font-family: "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, sans-serif; 
 
    font-size: 17px; 
 
    margin: 0px; 
 
} 
 
#header #logo { 
 
    display: inline-block; 
 
    float: left; 
 
    height: auto; 
 
    width: 100%; 
 
    background-color: #DB5658; 
 
    min-height: 30px; 
 
} 
 
#header #logo_comment { 
 
    display: inline-block; 
 
    float: right; 
 
    height: 40px; 
 
    border-top-left-radius: 110%; 
 
    background-color: #FFF; 
 
    width: 60%; 
 
    text-align: right; 
 
    line-height: 40px; 
 
    font-family: "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, sans-serif; 
 
    font-size: 14px; 
 
    padding: 0px 10px 0px 10px; 
 
}
<body> 
 
    <div id="header"> 
 
    <div id="date"> 
 
     <div id="date_day_month"> 
 
     hoi 
 
     </div> 
 
     <div id="date_day"> 
 
     hoi 
 
     </div> 
 
    </div> 
 
    <div id="logo"> 
 
     <div id="logo_comment"> 
 
     Hoi 
 
     </div> 
 
    </div> 
 

 
    </div> 
 
</body>

我注意到,當我在這裏堆運行這段代碼,這個問題並不積極。然而在撥弄它顯然是爲我。

http://jsfiddle.net/njk96/28/

-----------------------編輯:

使用Chrome的最新版本,在我的戴爾XPS 13 (9434),而不是放大或縮小。 http://postimg.org/image/ggbkubiyz/(我的屏幕截圖)

+0

我在小提琴裏看不到它 – j08691

+0

同樣在這裏;小提琴看起來很像片段。有沒有把頁面放大或縮小? –

+0

http://postimg.org/image/ggbkubiyz/首頁我不是那個在這裏瘋狂的人:D – Mart

回答

1
body { 
    display: initial; 
} 

或使用:

body { 
    display: inline; 
} 

來自:https://developer.mozilla.org/en-US/docs/Web/CSS/initial

初始CSS關鍵詞的屬性的初始值適用於一個 元件。它在每個CSS屬性上都是允許的,並使其指定的元素 使用該屬性的初始值。

+1

不是工作解決方案..現在有效的是將我的行高從75像素編輯爲74像素,現在所有工作都完成了。仍然很奇怪 – Mart