왜 2 개의 인라인 블록 div가 조합 된 너비와 부모 맞춤의 크기가 나란히 정렬되어 있지 않습니까?

Question

나는 이것을 이해할 수 없다.

플로팅으로 작동 시키지만, 왜 이런 일이 일어나는지 이해하고 싶습니다.

pen

코드 : 당신이 하지 말자들이 인라인 요소의 공백에 민감하기 때문에 그건, 나란히 맞는 이유를 의미하는 경우

.container { 
 
    width: 1000px; 
 
    height: 400px; 
 
    background-color: purple; 
 
    position: relative; 
 
} 
 

 
.item { 
 
    height: 100px; 
 
    display: inline-block; 
 
} 
 

 
.item.left { 
 
    width: 70%; 
 
    background-color: green; 
 
} 
 

 
.item.right { 
 
    width: 30%; 
 
    background-color: orange; 
 
}

<div class="container"> 
 
    <div class="item left"></div> 
 
    <div class="item right"></div> 
 
</div>

Answer 1

당신의 암호. div의 사이의 공간을 제거하고 그들은 같은 라인 나란히 늘어선 :

.container { 
 
    width: 1000px; 
 
    height: 400px; 
 
    background-color: purple; 
 
    position: relative; 
 
} 
 

 
.item { 
 
    height: 100px; 
 
    display: inline-block; 
 
} 
 

 
.item.left { 
 
    width: 70%; 
 
    background-color: green; 
 
} 
 

 
.item.right { 
 
    width: 30%; 
 
    background-color: orange; 
 
}

<div class="container"> 
 
    <div class="item left"></div><div class="item right"></div> 
 
</div>