一.问题背景：
外层容器宽高未知，里面为四个相同大小的格子，格子间间距为10px，如下图所示：
请实现该全等四宫格.
二.代码如下:
HTML代码：
<div class="parent">
<p class="child b1"></p>
<p class="child b2"></p>
<p class="child b3"></p>
<p class="child b4"></p>
</div> CSS代码：
/**{margin:0px;}*/
.child{background-color: #009999;}
.parent{position:relative;width: 300px;height: 300px;}
.child{position: absolute; width: 50%;height: 50%;box-sizing: border-box; background-clip: content-box;}
.b1{left: 0;top: 0;padding-bottom: 10px;padding-right: 10px;outline: 2px solid red}
.b2{right:0;top: 0;padding-bottom: 10px;outline: 2px solid blue}
.b3{left: 0; bottom: 0;padding-right: 10px;outline: 2px solid yellow}
.b4{right: 0;bottom: 0;outline: 2px solid green}
三.思路：
⑴将 <div> 作为最外层容器，里面用4个 p标签 来实现4个格子的效果.
⑵对p标签设置position:absolute绝对定位，然后分别操纵left,right,bottom来将他们定位到<div>的上下左四角.
⑶ 中间的 "十" 字型空隙效果则可以通过设置 上左格子 ， 上右格子 ， 下左格子的padding-left和padding-bottom实现.
四.问题
如果不对p设置margin:0px的话，会出现下图所示状况：
四个格子出现了重叠...
而设置了margin:0px后，正常，如下图：
为什么会造成这种情况呢？小子诚望各位先生指点.
楼主要实现这个效果 不妨给p标签加上display: block; 还有不明白实现四个方块为啥不用小的div 来设置浮动这样比p 元素简洁很多
默认的p标签是有上下margin的, 而对四个p标签绝对定位的时候, top和bottom是以p标签margin box的边缘为准的, 其父元素(.parent)的padding box上下边缘直接接触的是p的margin box的边缘.
这就意味着, 给这四个p标签设置height: 50%必然造成重叠. 因为如果算上下margin, 每个p标签实际的占用的高度是大于150px的.
p标签在默认状态下有margin，你把p的宽高都设成50%，margin就把他们挤压在一起了。