디스플레이의 직면 문제 : 인라인 블록 속성

Question

CSS display: inline-block; 속성을 사용하여 두 div를 나란히 배치하려고합니다. 하지만 내 사업부는 다른 사업부 아래 배치됩니다. 바이올린의

링크 : - https://jsfiddle.net/04cc1n8j/

HTML

<div class='outerDiv'> 
    <div class='innerDiv1'></div> 
    <div class='innerDiv2'></div> 
</div> 

CSS

.outerDiv{ 
    width:300px; 
    height:200px; 
    margin:0px; 
    padding:0px; 
} 
.innerDiv1{ 
    width:100px; 
    height:200px; 
    display:inline-block; 
    background-color:red; 
    margin:0px; 
    padding:0px; 
} 

.innerDiv2{ 
    width:200px; 
    height:200px; 
    display:inline-block; 
    background-color:green; 
    margin:0px; 
    padding:0px; 
} 

Answer 1

inline-block 요소 사이의 공백의 폭 레이아웃을 파괴한다. This article 도움이됩니다.