css – GWT布局问题

我有这样的布局结构：
1)首先放置SimpleLayoutPanel主(绿色边框)
2)我想将DockLayoutPanel子项添加到main(红色边框; 25px边距)

我实现了这个,但是附件(.jpg)中显示的结果对我来说很奇怪.

因此,儿童的所有红色(顶部,左侧,右侧,底部)边界应位于主要内部,但子面板会发生变化.如何以正确的方式实现此逻辑？我有更复杂的ui结构3-4级.而且我也没有利润.

这里是代码和CSS：

SimpleLayoutPanel panel = new SimpleLayoutPanel();
panel.setStyleName("mainModulePanel");
SimpleLayoutPanel p = new SimpleLayoutPanel();
p.setStyleName("moduleBody");
panel.setWidget(p);
initWidget(panel);

//CSS    
.moduleBody {
/*width: 100%;
  height: 100%;*/
  margin:  0px;
  width: 100%;
  height: 100%;
  border: 3px solid red;
}

.mainModulePanel {
/*margin-top: 5px;
  margin-bottom: 5px;
  margin-right: 5px;*/
  border: 3px solid green;
}

解决方法

这与边框的html定义有关！

让我用一个例子解释一下.

您的DockLayoutPanel是500x500px.你将一个100×100％的子元素放入其中,其中边距,填充和边框为0px.您的元素大小为500x500px.不,你给它3px的边框.这意味着增加3px的高度和宽度.所以你的元素大小为506x506px.
溢出被忽略.

结果是你的第二张照片.

这是正确的HTML行为,与GWT无关！