JQM内容中div容器周围的额外空间

Question

我将div容器放在内容div中的jquery移动页面内。代码如下。

CSS代码

.his_outercontainer{
  width:100%;
  border:1px solid #cccccc;
  height:50px;
  display: table;
}

HTML代码

<div data-role="page">
  <div data-role="header">
    <h1>Welcome To My Homepage</h1>
  </div>
  <div data-role="content">
    <div class='his_outercontainer'>
      hello I am inside
    </div>
  </div>
  <div data-role="footer">
    <h1>Footer Text</h1>
  </div>
</div>

我看到如下。为什么内部div（his_outercontainer）周围有额外的空间？

Answer 1

你的.ui-content的填充量为1em。这是删除它时发生的情况：http://jsfiddle.net/vee827md/3/

.ui-content { padding: 0px;
}

我应该提一下，填充是由jquery mobile css自动添加的。