我怎样才能使这个边界到最后？

Question

I have this short example:

link

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

My problem is that border (red border) is not until the end header.

There is a space both top and bottom in. CSS code in the header must remain exactly the same

Can you help me to solve this problem?

Thanks in advance!

Answer 1

remove padding from the .header class. This space is header's padding. And add the padding to the .menu-collapse class.

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

Here is the fiddle .

Answer 2

Remove Padding from header and provide top & bottom padding too to menu-collapse . Try this:

 .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

set padding 0px for header and add line-height

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

Answer 4

Check this: 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%;}

You dont need to use padding in header