jquery隐藏元素显示高度问题？

Question

最初#panel被display:none css属性隐藏。当我计算隐藏元素的高度时，它显示高度为“18”，为什么？ display:none元素应该具有高度0，但它的显示。

我在这个基本的例子中甚至在slideToggle函数中显示我得到的反义值如0和18  请解释一下后台发生了什么？

JSfiddle

$(document).ready(function() {
  $("#flip").click(function() {
    $("#panel").slideToggle();

  });
  alert($("#panel").height());

});

#panel,
#flip {
  padding: 5px;
  text-align: center;
  background-color: #e5eecc;
  border: solid 1px #c3c3c3;
}
#panel {
  padding: 50px;
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="flip">Click to slide the panel down or up</div>
<div id="panel">Hello world!</div>