核心提示：两个方块之间有空格出现原因是使用了display: inline-block;它使得块级元素变为内联元素，使得两个元素之间有个空格有三种方法可以解决一、在左边p中margin-right添加负值二、两...
两个方块之间有空格
出现原因是使用了display: inline-block;它使得块级元素变为内联元素，使得两个元素之间有个空格
有三种方法可以解决
一、在左边p中margin-right添加负值
二、两个p写在同一行
三、给最外面的p把font-size设为0在两个小的p里面设置自身字体大小
效果如下
<p class="Container">
<p class="left">
<p>dfsbsdffs</p>
</p>
<p class="right">
<p>fsdk.kjs.df</p>
<p>fsdk.kjs.df</p>
<p>fsdk.kjs.df</p>
</p>
</p>
当其中一个p内设置多行就会出现以下情况
出现这种情况的原因是：基线问题
这里面左边的p只有一行，右边p有三行导致，左边的一行直接与右边的第三行对齐
解决方法即把vertical-align的默认值不是基线对齐就可以了可以改为
vertical-align: top;
显示效果为下
全部代码如下：
<style type="text/css">
.container{
width: 1000px;
height: 1000px;
background-color: red;
font-size: 0;
}
.left,.right{
display: inline-block;
font-size: 16px;
}
.left{
width: 400px;
height:400px;
background-color: yellow;
/*margin-right: -10px;*/
vertical-align: top;
}
.right{
width: 400px;
height: 400px;
background-color:blueviolet;
}
</style>
</head>
<body>
<p class="container">
<p class="left">
<p>dfsbsdffs</p>
</p>
<p class="right">
<p>fsdk.kjs.df</p>
<p>fsdk.kjs.df</p>
<p>fsdk.kjs.df</p>
</p>
</p>
</body>
