Question

我有这个简短的例子：

代码HTML：

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

CODE 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%;
}

我的问题是边框（红色边框）直到结束标题。

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

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

提前致谢！

Answer 1

从.header类中删除填充。这个空间是标题的填充。并将填充添加到.menu-collapse类。

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

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

这是fiddle。

Answer 2

从header移除填充，并向top & bottom padding提供menu-collapse。试试这个：

.header{
        width:300px;
        height:auto;
        border:1px solid grey;
    }
    .menu-collapse {
        display: table-cell;
        vertical-align: middle;
        border-right: 2px solid red;
        padding: 5px;
        height: 100%;
    }

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

Answer 3

为标题设置填充0px并添加line-height

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

Answer 4

检查一下： https://jsfiddle.net/6ae7vumn/3/

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

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

您不需要在标题

中使用填充

我怎样才能使这个边界到底？CSS

4 个答案: