html - 我怎样才能使这个边界结束？CSS

Question

我有这个简短的例子:

link

代码 HTML:

<div class="header">
    <div class="menu-collapse">MENU</div>
</div>

代码 CSS:

.header{
    width:300px;
    height:auto;
    border:1px solid grey;
    padding: 5px 0 5px 0;
}

    .menu-collapse {
        display: table-cell;
        vertical-align: middle;
        border-right: 2px solid red;
        padding: 0px 10px 0 10px;
        height: 100%;
}

我的问题是边框(红色边框)直到结束标题才出现。

顶部和底部都有一个空间。 header 中的 CSS 代码必须保持完全相同

你能帮我解决这个问题吗？

提前致谢!

Answer 1

为页眉设置padding 0px并添加行高

.header{
    width:300px;
    height:auto;
    border:1px solid grey;
    padding: 0;
    line-height:25px;
}