添加內容到div導致它轉移？

Question

在下面的代碼中，我有一個簡單的頁面設置，但只要我添加div類page整個主頁div向下移動？

嘗試將<h1>hello</h1>添加到div與page類。

什麼問題，該div應該保持在那裏，應該加上<h1>hello</h1>！

代碼：https://jsfiddle.net/5sx0sj2q/

.container{ 
 
    width: 100%; 
 
    background-color: #d5d5d5; 
 
} 
 
.sidebarcontainer{ 
 
    width: 300PX; 
 
    height: 2000px; 
 
    display: inline-block; 
 
    box-sizing: border-box; 
 
    padding: 5px; 
 
    padding-right: 2px; 
 
} 
 
.innersidebarcontainer{ 
 
    position: relative; 
 
     width: 100%; 
 
    height: 100%; 
 
} 
 
.sidebar{ 
 
    width: 293px; 
 
    background-color: white; 
 
    height: 500px; 
 
    top: 1px; 
 
    position: absolute; 
 
} 
 
.mainpage{ 
 
    width: calc(100% - 300px); 
 
    padding: 5px; 
 
    padding-left: 2px; 
 
    height: 2000px; 
 
    display: inline-block; 
 
    box-sizing: border-box; 
 
} 
 
.page{ 
 
    width: 100%; 
 
    height: 100%; 
 
    background-color: white; 
 
} 
 
.footer{ 
 
    height: 500px; 
 
    width: 100%; 
 
    margin: 0 auto; 
 
    background-color: #031003; 
 
}

<div class="container"> 
 
     <div class="sidebarcontainer"> 
 
      <div class="innersidebarcontainer"> 
 
        <div class="sidebar"> 
 
       </div> 
 
      </div> 
 
     </div><!-- 
 
    --><div class="mainpage"> 
 
     <div class="page"></div> 
 
    </div> 
 
    </div> 
 
    <div class="footer"></div>

Answer 1

是有針對一招：

h1{ 
    display : inline-block; 
} 

01：

.mainpage{ 
    vertical-align : top; // Add this 
} 

此外，H1顯示屬性更改

所有的元素保持在他們應該在的地方。 CSS的樂趣。

Working Fiddle

Answer 2

是正常的，顯示：inline-block的加一點空間元素之間（你有沒有更多的空間）。 使用float left代替工作。