鍍金池/ 問答/Java  HTML/ 在子元素沒有margin情況下的父子元素間有空隙

在子元素沒有margin情況下的父子元素間有空隙

clipboard.png

如圖為什么父元素的邊緣高度要高于子元素的邊緣
途中紅色框?yàn)樽觗iv的border
藍(lán)色透明遮罩是父元素的面積
在兩者高度均為100的情況下子元素向下有位移
但是父元素沒有padding-top
子元素均沒有margin
有border不存在margin坍塌問題 那么空出來的這一段到底是什么呢?
代碼如下
html部分:

clipboard.png

css部分:

*{
    margin: 0px;
    padding: 0px;
}
.iheader {
    margin-top: 0px; 
    width: 1190px; 
    margin: 0 auto;
    height: 100px;
    box-sizing: border-box;
    position: relative;
}
.clearfix{
    clear: both;
}
.iheader img{
   margin-top: 20px;
}
.logo{
    width: 350px;
    height: 99px;
    float: left;
}
.input{
    width: 540px;
    float: left;
    height: 100px;
    margin-top: 14px;
}
input[type=text]{
    width: 465px;
    height:40px;
    box-sizing: border-box;
    border: 2px solid #418ee7;
    vertical-align: middle;
    line-height: 150px;
}
.hint{
    font-size: 12px;
    color: #333;
    margin-left: 0px;
    padding: 0px;
    height: 30px;
}
.hint li{
    line-height: 30px;
    color: #999999;
}
.iheader a{
    margin-left: 0px;
    text-align: center;
    vertical-align: middle;
    text-decoration: none;
    line-height: 40px;
    width: 70px;
    height:40px;
    background: #418ee7;
    vertical-align: middle;
    border: none;
    color: white;
    font-size:16px;
    font-weight: 500;
    display: inline-block;
    box-sizing: border-box;
}

.iheader ul{
  list-style: none;
  display: inline-block;
}
.iheader li{
  display:inline-block;
  vertical-align: middle;
}
回答
編輯回答
孤巷

同上,你給img加了上邊距導(dǎo)致的額

2017年1月30日 11:12
編輯回答
假灑脫
.input{
    width: 540px;
    float: left;
    height: 100px;
    margin-top: 14px; /* 是不是這個(gè) */
}
2017年7月29日 10:59