css:为什么<parent>影响父div的宽度

Question

请考虑以下HTML

HTML:

<div class="container">
    <img src="img.jpg"/>
    <div class="bc">
        <input type="file"/>
        <button>Upload</button>    
    </div>
</div>

CSS:

.container {
    margin-left: 10% ;
    margin-right: 10% ;
    height: 100px ;
    background-color: lightgrey ;
}
img {
    height: 100% ;
}

.bc {
    display: inline-block;
    height: 100px;
    background-color: grey ;
    vertical-align:middle
}
input {
    visibility: hidden ;
    width: 0;
    height: 0;
    display:inline;
}

当我删除'input'元素时,'bc'的宽度或多或少等于按钮,但是当它为precent时,'bc'变得很大(宽度).这是我的jsfiddle.有人能解释为什么会这样,以及如何撤消这种效果(因为我需要输入字段)？

Answer 1

visibility: hidden;

使你的元素不可见,但它"仍在那里",

display:none;

从元素流中消除它,它不会影响任何其他元素.