Question

我正在构建一个游戏页面，我想将一个顶部信息栏放在一个更大的容器中，该容器将保存完整的游戏窗口。现在，游戏窗口的边框和信息栏的绿色背景之间存在间隙，我希望它位于最顶层。

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;，信息栏会正确定位，但我无法弄清楚如何保持边框并将信息栏放在顶部（但仍然在边境内。）

Answer 1

删除消息行段落上的边距。

#messageline {
    margin:0px;
}

<强> jsFiddle example

Answer 2

与j08691所说的相关 - 如果你想要这个边距，你可以在父元素中添加任何类型的填充 - .info-bar在这种情况下，边距只会“推”到父元素。关于CSS的一个奇怪的事情。

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

See this codepen for an example.

容器和内部div之间的奇怪差距

2 个答案: