DIV не достигает вершины родительского Div с 100% высоты

Question

У меня есть этот CSS код:

.parent { 
height: 40px; 
width: 100%; 
background-color: #383838; 
box-shadow: 0px 1px 5px #767676; 
overflow: hidden; 
position: relative; 
box-sizing: border-box; 
} 

.child {   
display: inline-block; 
border-left: solid white 1px; 
position: absolute; 
height: 100%; 
padding: 0px 10px 10px 10px; 
right: 0px; 
top: 7px; 
} 

Я хочу, чтобы сделать границу .child растянуть на всю высоту .parent, но с указанными выше кодов он оставляет раздражающий зазор наверху (он действительно достигает нижней части). Я попытался исправить это, установив отрицательный запас и установив высоту линии в 0, но он испортил текст внутри .child. Есть ли правильный способ исправить это?

Answer 1

Вам необходимо удалить top: 7px, поскольку он позиционирует дочерний элемент 7px относительно родителя.

.parent { 
 
    height: 40px; 
 
    width: 100%; 
 
    background-color: #383838; 
 
    box-shadow: 0 1px 5px #767676; 
 
    overflow: hidden; 
 
    position: relative; 
 
    box-sizing: border-box; 
 
} 
 
.child { 
 
    display: inline-block; 
 
    border-left: 1px white solid; 
 
    position: absolute; 
 
    height: 100%; 
 
    padding: 0 10px 10px 10px; 
 
    right: 0; 
 
    /* top: 7px; Remove this */ 
 
}

<div class="parent"> 
 
    <div class="child"></div> 
 
</div>

Answer 2

*{ 
 
    margin:0px; 
 
    padding:0px; 
 
    border:0px; 
 
} 
 
.parent { 
 
    height: 40px; 
 
    width: 100%; 
 
    background-color: #383838; 
 
    box-shadow: 0px 1px 5px #767676; 
 
    overflow: hidden; 
 
    padding:0px; 
 
} 
 
.child { 
 
    border-left: solid white 1px; 
 
    height: 100%; 
 
    padding: 0px 10px 10px 10px; 
 
    
 
    
 
}

<div class="parent"> 
 
    <div class="child"></div> 
 
</div>

Вы должны нормализовать CSS, то все будет работать нормально.