关于inline-block会造成空白间隙的解决方案

关于inline-block会造成空白间隙的解决方案

display:inline-block会造成空白间隙，只有当这个完全挨着时，空白的间隙才会消失，如果有空隙的存在，20%宽度+空隙宽度+80%宽度 > 100%宽度，会造成第二个div另起一行布局

空隙产生原因：
HTML中的换行符、空格符、制表符等空白符，字体大小不为0的情况下，空白符占据一定宽度，使用inline-block会产生元素间的空隙

解决方式：

1. 通过浮动可以解决空白间隙（float）
2. 改变html结构，让其没有空白间隙。（下面四种任意一种都可以）
   
3. 通过设置负的margin-rigin值，让他们处于一行

margin-right:-0.25em;

4. 设置父元素的字体为“0”，然后在“inline-block”元素上重置字体需要的大小。
   这样处理在Firexfox,chrome等浏览器下是达到了效果，可是在Safari下可问题依然存在。
5. 在父元素中设置font-size:0,用来兼容chrome，而使用letter-space:-N px来兼容safari

main .aside{
width: 20%;
background-color: rgb(21, 58, 90);
}
main .content{
width: 80%;
background-color: rgb(103, 123, 141);
}

main{
text-align: center;
letter-spacing: -0.25rem;/*根据不同字体字号或许需要做一定的调整*/
word-spacing: -0.25rem;
font-size: 0;
}
main .aside,main .content{
display: inline-block;
height: 20rem;

font-size: 1rem;
letter-spacing: normal;
word-spacing: normal;
}

之后就解决了，主要原因就是html中定义的两个div中有空格存在

其他小问题：

关于当窗体大小改变时引发的布局混乱问题解决方案

解决方式： 给body设置最小宽度即可min-width

关于原本两个对齐的行内块在放入内容后无法对齐后的解决方案

解决方式：设置此行内元素为vertical-align:top;