容器和內部div之間的奇怪差距

我正在構建一個遊戲頁面，我想在一個容納完整遊戲窗口的較大容器中放置一個頂部信息欄。現在遊戲窗口的邊框與信息欄的綠色背景之間有一段距離，我希望它位於最上方。容器和內部div之間的奇怪差距

HTML

<div class = "game-window"> 

    <div class ="info-bar"> 
     <p id="messageline">New Game!</p> 
    </div> 

    <button class="btn btn-success" id="newpickbutton" onclick="buypick()">Buy a new pick!</button> 

    <button class="btn btn-primary" id="digbutton" onclick="dig()">Dig!</button> 

</div>

CSS

/*------------------------------------------------------------------------------------------------ 
    Layout 
    ------------------------------------------------------------------------------------------------*/ 
    .game-window { 
     border: solid 3px; 
     width:800px; 
     height: 800px; 
     margin-left:auto; 
     margin-right:auto; 
    } 

    .info-bar { 
     border: solid 0px transparent; 
     background-color:lightgreen; 
     height:100px; 
    } 

    /*------------------------------------------------------------------------------------------------ 
    Screen Elements 
    ------------------------------------------------------------------------------------------------*/ 
    #digbutton { 
     width:500px; 
     height:500px; 
    } 

    #messageline { 
     margin-top:20px; 
    }

如果我從遊戲中窗口類中刪除行border: solid 3px;中，信息欄將自身定位正確，但我無法弄清楚如何保持邊界並在頂部有信息欄（但仍在邊界內）。

來源

2014-04-06 The Bearded Templar

刪除消息行段落的邊距。

#messageline { 
    margin:0px; 
}

jsFiddle example

來源

2014-04-06 02:36:55 j08691

哦，我現在感覺有點傻。我忘記了爲什麼我需要這個保證金 - 這是來自過去的佈局，我想我沒有。謝謝！ –

或者你可以在你的'.info-bar' div中添加'overflow：auto'。 http://jsfiddle.net/j08691/jc6Dw/ – j08691

相關到什麼j08691說 - 如果你想要的利潤，你可以在任何類型的填充添加到父元素 - 在這種情況下.info-bar，保證金將只「推」反對父母。關於CSS的那些奇怪的事情之一。

.info-bar { 
    border: solid 0px transparent; 
    background-color:lightgreen; 
    height:100px; 
    padding-top: 1px; 
}

See this codepen for an example.

來源

2014-04-06 02:40:56 chipcullen

容器和內部div之間的奇怪差距

回答

相關問題